Add shortcuts to DatePicker

packages/datetime/src/_datepicker.scss

@@ -20,6 +20,7 @@ $header-margin: ($header-height - $pt-input-height) / 2 !default;
 // react-day-picker does not conform to our naming scheme
 // stylelint-disable selector-class-pattern
 .#{$ns}-datepicker {
+  display: flex;
   position: relative;
   border-radius: $pt-border-radius;
   background: $datepicker-background-color;

packages/datetime/src/dateInput.tsx

@@ -38,6 +38,7 @@ import { isDateValid, isDayInRange } from "./common/dateUtils";
 import { getFormattedDateString, IDateFormatProps } from "./dateFormat";
 import { DatePicker } from "./datePicker";
 import { getDefaultMaxDate, getDefaultMinDate, IDatePickerBaseProps } from "./datePickerCore";
+import { IDatePickerShortcut } from "./shortcuts";
 
 export interface IDateInputProps extends IDatePickerBaseProps, IDateFormatProps, IProps {
     /**
@@ -125,6 +126,15 @@ export interface IDateInputProps extends IDatePickerBaseProps, IDateFormatProps,
      */
     showActionsBar?: boolean;
 
+    /**
+     * Whether shortcuts to quickly select a date are displayed or not.
+     * If `true`, preset shortcuts will be displayed.
+     * If `false`, no shortcuts will be displayed.
+     * If an array is provided, the custom shortcuts will be displayed.
+     * @default false
+     */
+    shortcuts?: boolean | IDatePickerShortcut[];
+
     /**
      * The currently selected day. If this prop is provided, the component acts in a controlled manner.
      * To display no date in the input field, pass `null` to the value prop. To display an invalid date error
@@ -145,6 +155,7 @@ export interface IDateInputState {
     valueString: string;
     isInputFocused: boolean;
     isOpen: boolean;
+    selectedShortcutIndex?: number;
 }
 
 @polyfill
@@ -200,6 +211,8 @@ export class DateInput extends AbstractPureComponent2<IDateInputProps, IDateInpu
                     dayPickerProps={dayPickerProps}
                     onChange={this.handleDateChange}
                     value={dateValue}
+                    onShortcutChange={this.handleShortcutChange}
+                    selectedShortcutIndex={this.state.selectedShortcutIndex}
                 />
             </div>
         );
@@ -439,6 +452,10 @@ export class DateInput extends AbstractPureComponent2<IDateInputProps, IDateInpu
         }
     };
 
+    private handleShortcutChange = (_: IDatePickerShortcut, selectedShortcutIndex: number) => {
+        this.setState({ selectedShortcutIndex });
+    };
+
     /** safe wrapper around invoking input props event handler (prop defaults to undefined) */
     private safeInvokeInputProp(name: keyof HTMLInputProps, e: React.SyntheticEvent<HTMLElement>) {
         const { inputProps = {} } = this.props;

packages/datetime/src/datePicker.tsx

@@ -26,6 +26,7 @@ import * as Errors from "./common/errors";
 import { DatePickerCaption } from "./datePickerCaption";
 import { getDefaultMaxDate, getDefaultMinDate, IDatePickerBaseProps } from "./datePickerCore";
 import { DatePickerNavbar } from "./datePickerNavbar";
+import { IDatePickerShortcut, IDateRangeShortcut, Shortcuts } from "./shortcuts";
 import { TimePicker } from "./timePicker";
 
 export interface IDatePickerProps extends IDatePickerBaseProps, IProps {
@@ -66,12 +67,31 @@ export interface IDatePickerProps extends IDatePickerBaseProps, IProps {
      */
     onChange?: (selectedDate: Date, isUserChange: boolean) => void;
 
+    /**
+     * Called when the `shortcuts` props is enabled and the user changes the shortcut.
+     */
+    onShortcutChange?: (shortcut: IDatePickerShortcut, index: number) => void;
+
     /**
      * Whether the bottom bar displaying "Today" and "Clear" buttons should be shown.
      * @default false
      */
     showActionsBar?: boolean;
 
+    /**
+     * Whether shortcuts to quickly select a date are displayed or not.
+     * If `true`, preset shortcuts will be displayed.
+     * If `false`, no shortcuts will be displayed.
+     * If an array is provided, the custom shortcuts will be displayed.
+     */
+    shortcuts?: boolean | IDatePickerShortcut[];
+
+    /**
+     * The currently selected shortcut.
+     * If this prop is provided, the component acts in a controlled manner.
+     */
+    selectedShortcutIndex?: number;
+
     /**
      * Text for the today button in the action bar.
      * @default "Today"
@@ -95,6 +115,7 @@ export interface IDatePickerState {
     displayYear: number;
     selectedDay: number | null;
     value: Date | null;
+    selectedShortcutIndex?: number;
 }
 
 @polyfill
@@ -107,6 +128,7 @@ export class DatePicker extends AbstractPureComponent2<IDatePickerProps, IDatePi
         maxDate: getDefaultMaxDate(),
         minDate: getDefaultMinDate(),
         reverseMonthAndYearMenus: false,
+        shortcuts: false,
         showActionsBar: false,
         timePickerProps: {},
         todayButtonText: "Today",
@@ -124,6 +146,8 @@ export class DatePicker extends AbstractPureComponent2<IDatePickerProps, IDatePi
             displayMonth: initialMonth.getMonth(),
             displayYear: initialMonth.getFullYear(),
             selectedDay: value == null ? null : value.getDate(),
+            selectedShortcutIndex:
+                this.props.selectedShortcutIndex !== undefined ? this.props.selectedShortcutIndex : -1,
             value,
         };
     }
@@ -134,26 +158,29 @@ export class DatePicker extends AbstractPureComponent2<IDatePickerProps, IDatePi
 
         return (
             <div className={classNames(Classes.DATEPICKER, className)}>
-                <DayPicker
-                    showOutsideDays={true}
-                    locale={locale}
-                    localeUtils={localeUtils}
-                    modifiers={this.getDatePickerModifiers()}
-                    {...dayPickerProps}
-                    canChangeMonth={true}
-                    captionElement={this.renderCaption}
-                    navbarElement={this.renderNavbar}
-                    disabledDays={this.getDisabledDaysModifier()}
-                    fromMonth={minDate}
-                    month={new Date(displayYear, displayMonth)}
-                    onDayClick={this.handleDayClick}
-                    onMonthChange={this.handleMonthChange}
-                    selectedDays={this.state.value}
-                    toMonth={maxDate}
-                    renderDay={this.renderDay}
-                />
-                {this.maybeRenderTimePicker()}
-                {showActionsBar && this.renderOptionsBar()}
+                {this.maybeRenderShortcuts()}
+                <div>
+                    <DayPicker
+                        showOutsideDays={true}
+                        locale={locale}
+                        localeUtils={localeUtils}
+                        modifiers={this.getDatePickerModifiers()}
+                        {...dayPickerProps}
+                        canChangeMonth={true}
+                        captionElement={this.renderCaption}
+                        navbarElement={this.renderNavbar}
+                        disabledDays={this.getDisabledDaysModifier()}
+                        fromMonth={minDate}
+                        month={new Date(displayYear, displayMonth)}
+                        onDayClick={this.handleDayClick}
+                        onMonthChange={this.handleMonthChange}
+                        selectedDays={this.state.value}
+                        toMonth={maxDate}
+                        renderDay={this.renderDay}
+                    />
+                    {this.maybeRenderTimePicker()}
+                    {showActionsBar && this.renderOptionsBar()}
+                </div>
             </div>
         );
     }
@@ -175,6 +202,10 @@ export class DatePicker extends AbstractPureComponent2<IDatePickerProps, IDatePi
                 value,
             });
         }
+
+        if (this.props.selectedShortcutIndex !== prevProps.selectedShortcutIndex) {
+            this.setState({ selectedShortcutIndex: this.props.selectedShortcutIndex });
+        }
     }
 
     protected validateProps(props: IDatePickerProps) {
@@ -269,11 +300,72 @@ export class DatePicker extends AbstractPureComponent2<IDatePickerProps, IDatePi
         );
     }
 
+    private maybeRenderShortcuts() {
+        const { shortcuts } = this.props;
+        if (shortcuts == null || shortcuts === false) {
+            return null;
+        }
+
+        const { selectedShortcutIndex } = this.state;
+        const { maxDate, minDate, timePrecision } = this.props;
+        // Reuse the existing date range shortcuts and only care about start date
+        const dateRangeShortcuts: IDateRangeShortcut[] | true =
+            shortcuts === true
+                ? true
+                : shortcuts.map(shortcut => ({
+                      ...shortcut,
+                      dateRange: [shortcut.date, undefined],
+                  }));
+        return [
+            <Shortcuts
+                key="shortcuts"
+                {...{
+                    allowSingleDayRange: true,
+                    maxDate,
+                    minDate,
+                    selectedShortcutIndex,
+                    shortcuts: dateRangeShortcuts,
+                    timePrecision,
+                }}
+                onShortcutClick={this.handleShortcutClick}
+                useSingleDateShortcuts={true}
+            />,
+            <Divider key="div" />,
+        ];
+    }
+
     private handleDayClick = (day: Date, modifiers: DayModifiers, e: React.MouseEvent<HTMLDivElement>) => {
         Utils.safeInvoke(this.props.dayPickerProps.onDayClick, day, modifiers, e);
         if (modifiers.disabled) {
             return;
         }
+
+        this.updateDay(day);
+
+        // allow toggling selected date by clicking it again (if prop enabled)
+        const newValue =
+            this.props.canClearSelection && modifiers.selected ? null : DateUtils.getDateTime(day, this.state.value);
+        this.updateValue(newValue, true);
+    };
+
+    private handleShortcutClick = (shortcut: IDateRangeShortcut, selectedShortcutIndex: number) => {
+        const { onShortcutChange, selectedShortcutIndex: currentShortcutIndex } = this.props;
+        const { dateRange, includeTime } = shortcut;
+        const newDate = dateRange[0];
+        const newValue = includeTime ? newDate : DateUtils.getDateTime(newDate, this.state.value);
+
+        this.updateDay(newDate);
+        this.updateValue(newValue, true);
+
+        if (currentShortcutIndex === undefined) {
+            this.setState({ selectedShortcutIndex });
+        }
+
+        const datePickerShortcut = { ...shortcut, date: shortcut.dateRange[0] };
+        Utils.safeInvoke(onShortcutChange, datePickerShortcut, selectedShortcutIndex);
+    };
+
+    private updateDay = (day: Date) => {
         if (this.props.value === undefined) {
             // set now if uncontrolled, otherwise they'll be updated in `componentDidUpdate`
             this.setState({
@@ -285,11 +377,6 @@ export class DatePicker extends AbstractPureComponent2<IDatePickerProps, IDatePi
         if (this.state.value != null && this.state.value.getMonth() !== day.getMonth()) {
             this.ignoreNextMonthChange = true;
         }
-
-        // allow toggling selected date by clicking it again (if prop enabled)
-        const newValue =
-            this.props.canClearSelection && modifiers.selected ? null : DateUtils.getDateTime(day, this.state.value);
-        this.updateValue(newValue, true);
     };
 
     private computeValidDateInSpecifiedMonthYear(displayYear: number, displayMonth: number): Date {

packages/datetime/src/dateRangeInput.tsx

@@ -40,7 +40,8 @@ import { areSameTime, DateRange, isDateValid, isDayInRange } from "./common/date
 import * as Errors from "./common/errors";
 import { getFormattedDateString, IDateFormatProps } from "./dateFormat";
 import { getDefaultMaxDate, getDefaultMinDate, IDatePickerBaseProps } from "./datePickerCore";
-import { DateRangePicker, IDateRangeShortcut } from "./dateRangePicker";
+import { DateRangePicker } from "./dateRangePicker";
+import { IDateRangeShortcut } from "./shortcuts";
 
 export interface IDateRangeInputProps extends IDatePickerBaseProps, IDateFormatProps, IProps {
     /**

packages/datetime/src/dateRangePicker.tsx

@@ -41,8 +41,6 @@ import { DateRangeSelectionStrategy } from "./dateRangeSelectionStrategy";
 import { IDateRangeShortcut, Shortcuts } from "./shortcuts";
 import { TimePicker } from "./timePicker";
 
-export { IDateRangeShortcut };
-
 export interface IDateRangePickerProps extends IDatePickerBaseProps, IProps {
     /**
      * Whether the start and end dates of the range can be the same day.
@@ -223,7 +221,8 @@ export class DateRangePicker extends AbstractPureComponent2<IDateRangePickerProp
             hoverValue: [null, null],
             leftView,
             rightView,
-            selectedShortcutIndex: this.props.selectedShortcutIndex || -1,
+            selectedShortcutIndex:
+                this.props.selectedShortcutIndex !== undefined ? this.props.selectedShortcutIndex : -1,
             time,
             value,
         };

packages/datetime/src/datepicker.md

@@ -6,6 +6,33 @@ A `DatePicker` shows a monthly calendar and allows the user to choose a single d
 
 @reactExample DatePickerExample
 
+@## Shortcuts
+
+The menu on the left of the calendars provides "shortcuts" that allow users to
+quickly select common dates. The items in this menu are controlled through
+the `shortcuts` prop: `true` to show presets, `false` to hide (default), or an
+array of `IDatePickerShortcut` objects to define custom shortcuts.
+
+The **preset shortcuts** can be seen in the example above. They are as follows:
+
+- Today
+- Yesterday
+- 1 week ago
+- 1 month ago
+- 3 months ago
+- 1 year ago
+
+**Custom shortcuts** use the following interface:
+
+@interface IDatePickerShortcut
+
+@## Props
+
+Use the `onChange` prop to listen for changes to the set date range. You can
+control the selected date range by setting the `value` prop, or use the
+component in uncontrolled mode and specify an initial date range by setting
+`defaultValue`.
+
 @## Modifiers
 
 You can use the `modifiers` prop to conditionally apply styles to days.

packages/datetime/src/index.ts

@@ -32,5 +32,6 @@ export { DatePicker, IDatePickerProps } from "./datePicker";
 export { IDatePickerModifiers } from "./datePickerCore";
 export { DateTimePicker, IDateTimePickerProps } from "./dateTimePicker";
 export { DateRangeInput, IDateRangeInputProps } from "./dateRangeInput";
-export { DateRangePicker, IDateRangePickerProps, IDateRangeShortcut } from "./dateRangePicker";
+export { DateRangePicker, IDateRangePickerProps } from "./dateRangePicker";
 export { ITimePickerProps, TimePicker, TimePrecision } from "./timePicker";
+export { IDatePickerShortcut, IDateRangeShortcut } from "./shortcuts";