[DateRangePicker] Disable out-of-range shortcuts

packages/datetime/examples/dateRangePickerExample.tsx

@@ -6,7 +6,8 @@
  */
 
 import { Classes, Switch } from "@blueprintjs/core";
-import { BaseExample, handleBooleanChange } from "@blueprintjs/docs";
+import { BaseExample, handleBooleanChange, handleNumberChange } from "@blueprintjs/docs";
+import * as moment from "moment";
 import * as React from "react";
 
 import { DateRange, DateRangePicker } from "../src";
@@ -16,17 +17,40 @@ export interface IDateRangePickerExampleState {
     allowSingleDayRange?: boolean;
     contiguousCalendarMonths?: boolean;
     dateRange?: DateRange;
+    maxDateIndex?: number;
+    minDateIndex?: number;
     shortcuts?: boolean;
 }
 
+interface ISelectOption {
+    label: string;
+    value?: Date;
+}
+
+const MIN_DATE_OPTIONS: ISelectOption[] = [
+    { label: "None", value: undefined },
+    { label: "4 months ago", value: moment().add(-4, "months").toDate() },
+    { label: "1 year ago", value: moment().add(-1, "years").toDate() },
+];
+
+const MAX_DATE_OPTIONS: ISelectOption[] = [
+    { label: "None", value: undefined },
+    { label: "1 month ago", value: moment().add(-1, "months").toDate() },
+];
+
 export class DateRangePickerExample extends BaseExample<IDateRangePickerExampleState> {
     public state: IDateRangePickerExampleState = {
         allowSingleDayRange: false,
         contiguousCalendarMonths: true,
         dateRange: [null, null],
+        maxDateIndex: 0,
+        minDateIndex: 0,
         shortcuts: true,
     };
 
+    private handleMaxDateIndexChange = handleNumberChange((maxDateIndex) => this.setState({ maxDateIndex }));
+    private handleMinDateIndexChange = handleNumberChange((minDateIndex) => this.setState({ minDateIndex }));
+
     private toggleSingleDay = handleBooleanChange((allowSingleDayRange) => this.setState({ allowSingleDayRange }));
     private toggleShortcuts = handleBooleanChange((shortcuts) => this.setState({ shortcuts }));
     private toggleContiguousCalendarMonths = handleBooleanChange((contiguousCalendarMonths) => {
@@ -36,11 +60,16 @@ export class DateRangePickerExample extends BaseExample<IDateRangePickerExampleS
     protected renderExample() {
         const [start, end] = this.state.dateRange;
 
+        const minDate = MIN_DATE_OPTIONS[this.state.minDateIndex].value;
+        const maxDate = MAX_DATE_OPTIONS[this.state.maxDateIndex].value;
+
         return <div className="docs-datetime-example">
             <DateRangePicker
                 allowSingleDayRange={this.state.allowSingleDayRange}
                 contiguousCalendarMonths={this.state.contiguousCalendarMonths}
                 className={Classes.ELEVATION_1}
+                maxDate={maxDate}
+                minDate={minDate}
                 onChange={this.handleDateChange}
                 shortcuts={this.state.shortcuts}
             />
@@ -73,9 +102,47 @@ export class DateRangePickerExample extends BaseExample<IDateRangePickerExampleS
                     label="Show shortcuts"
                     onChange={this.toggleShortcuts}
                 />,
+            ], [
+                this.renderSelectMenu(
+                    "Minimum date",
+                    this.state.minDateIndex,
+                    MIN_DATE_OPTIONS,
+                    this.handleMinDateIndexChange,
+                ),
+            ], [
+                this.renderSelectMenu(
+                    "Maximum date",
+                    this.state.maxDateIndex,
+                    MAX_DATE_OPTIONS,
+                    this.handleMaxDateIndexChange,
+                ),
             ],
         ];
     }
 
     private handleDateChange = (dateRange: DateRange) => this.setState({ dateRange });
+
+    private renderSelectMenu(
+        label: string,
+        selectedValue: number | string,
+        options: ISelectOption[],
+        onChange: React.FormEventHandler<HTMLElement>,
+    ) {
+        return (
+            <label className={Classes.LABEL} key={label}>
+                {label}
+                <div className={Classes.SELECT}>
+                    <select value={selectedValue} onChange={onChange}>
+                        {this.renderSelectMenuOptions(options)}
+                    </select>
+                </div>
+            </label>
+        );
+    }
+
+    private renderSelectMenuOptions(options: ISelectOption[]) {
+        return options.map((option, index) => {
+            return <option key={index} value={index}>{option.label}</option>;
+        });
+    }
 }

packages/datetime/src/dateRangePicker.tsx

@@ -315,14 +315,17 @@ export class DateRangePicker
         }
 
         const shortcuts = typeof propsShortcuts === "boolean" ? createDefaultShortcuts() : propsShortcuts;
-        const shortcutElements = shortcuts.map((s, i) => (
-            <MenuItem
-                className={Classes.POPOVER_DISMISS_OVERRIDE}
-                key={i}
-                onClick={this.getShorcutClickHandler(s.dateRange)}
-                text={s.label}
-            />
-        ));
+        const shortcutElements = shortcuts.map((s, i) => {
+            return (
+                <MenuItem
+                    className={Classes.POPOVER_DISMISS_OVERRIDE}
+                    disabled={!this.isShortcutInRange(s.dateRange)}
+                    key={i}
+                    onClick={this.getShorcutClickHandler(s.dateRange)}
+                    text={s.label}
+                />
+            );
+        });
 
         return (
             <Menu className={DateClasses.DATERANGEPICKER_SHORTCUTS}>
@@ -497,6 +500,10 @@ export class DateRangePicker
     private setViews(leftView: MonthAndYear, rightView: MonthAndYear) {
         this.setState({ leftView, rightView });
     }
+
+    private isShortcutInRange(shortcutDateRange: DateRange) {
+        return DateUtils.isDayRangeInRange(shortcutDateRange, [this.props.minDate, this.props.maxDate]);
+    }
 }
 
 function getStateChange(value: DateRange,

packages/datetime/test/dateRangePickerTests.tsx

@@ -14,6 +14,7 @@ import * as TestUtils from "react-dom/test-utils";
 import * as DateUtils from "../src/common/dateUtils";
 import * as Errors from "../src/common/errors";
 import { Months } from "../src/common/months";
+import { IDateRangeShortcut } from "../src/dateRangePicker";
 import { Classes as DateClasses, DateRange, DateRangePicker, IDateRangePickerProps } from "../src/index";
 
 describe("<DateRangePicker>", () => {
@@ -275,6 +276,11 @@ describe("<DateRangePicker>", () => {
     });
 
     describe("minDate/maxDate bounds", () => {
+        const TODAY = new Date(2015, Months.FEBRUARY, 5);
+        const LAST_WEEK_START = new Date(2015, Months.JANUARY, 29);
+        const LAST_MONTH_START = new Date(2015, Months.JANUARY, 5);
+        const TWO_WEEKS_AGO_START = new Date(2015, Months.JANUARY, 22);
+
         it("maxDate must be later than minDate", () => {
             const minDate = new Date(2000, Months.JANUARY, 10);
             const maxDate = new Date(2000, Months.JANUARY, 8);
@@ -363,6 +369,32 @@ describe("<DateRangePicker>", () => {
             prevBtn = document.queryAll(".DayPicker-NavButton--prev");
             assert.lengthOf(prevBtn, 0);
         });
+
+        it("disables shortcuts that begin earlier than minDate", () => {
+            const minDate = TWO_WEEKS_AGO_START;
+            const initialMonth = TODAY;
+            const shortcuts: IDateRangeShortcut[] = [
+                { label: "last week", dateRange: [LAST_WEEK_START, TODAY] },
+                { label: "last month", dateRange: [LAST_MONTH_START, TODAY] },
+            ];
+
+            renderDateRangePicker({ initialMonth, minDate, shortcuts });
+            assert.isFalse(isShortcutDisabled(0));
+            assert.isTrue(isShortcutDisabled(1));
+        });
+
+        it("disables shortcuts that end later than maxDate", () => {
+            const maxDate = TWO_WEEKS_AGO_START;
+            const initialMonth = TWO_WEEKS_AGO_START;
+            const shortcuts: IDateRangeShortcut[] = [
+                { label: "last week", dateRange: [LAST_WEEK_START, TODAY] },
+                { label: "last month", dateRange: [LAST_MONTH_START, TODAY] },
+            ];
+
+            renderDateRangePicker({ initialMonth, maxDate, shortcuts });
+            assert.isTrue(isShortcutDisabled(0));
+            assert.isTrue(isShortcutDisabled(1));
+        });
     });
 
     describe("hover interactions", () => {
@@ -920,10 +952,16 @@ describe("<DateRangePicker>", () => {
         TestUtils.Simulate.mouseLeave(getDayElement(dayNumber, fromLeftMonth));
     }
 
+    function getShortcut(index: number) {
+        return document.queryAll(`.${DateClasses.DATERANGEPICKER_SHORTCUTS} .${Classes.MENU_ITEM}`)[index];
+    }
+
+    function isShortcutDisabled(index: number) {
+        return getShortcut(index).classList.contains(Classes.DISABLED);
+    }
+
     function clickFirstShortcut() {
-        const selector = `.${DateClasses.DATERANGEPICKER_SHORTCUTS} .${Classes.MENU_ITEM}`;
-        const firstShortcut = document.query(selector);
-        TestUtils.Simulate.click(firstShortcut);
+        TestUtils.Simulate.click(getShortcut(0));
     }
 
     function getDayElement(dayNumber = 1, fromLeftMonth = true) {

packages/site-docs/src/styles/_sections.scss

@@ -170,12 +170,6 @@
   }
 }
 
-#{example("DateRangePickerExample")} {
-  .docs-react-options-column {
-    flex: 0 0 270px;
-  }
-}
-
 #{example("HotkeyPiano")} {
   height: auto;