[datetime] fix(DatePicker): disable today btn when out of bounds (#5247)

palantir · Apr 15, 2022 · 749da9b · 749da9b · blueprint-bot · Apr 15, 2022
1 parent cd37cfd
commit 749da9b
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 2 deletions.
diff --git a/packages/datetime/src/datePicker.tsx b/packages/datetime/src/datePicker.tsx
@@ -263,11 +263,17 @@ export class DatePicker extends AbstractPureComponent2<DatePickerProps, IDatePic
     );
 
     private renderOptionsBar() {
-        const { clearButtonText, todayButtonText, canClearSelection } = this.props;
+        const { clearButtonText, todayButtonText, minDate, maxDate, canClearSelection } = this.props;
+        const todayEnabled = isTodayEnabled(minDate, maxDate);
         return [
             <Divider key="div" />,
             <div className={Classes.DATEPICKER_FOOTER} key="footer">
-                <Button minimal={true} onClick={this.handleTodayClick} text={todayButtonText} />
+                <Button
+                    minimal={true}
+                    disabled={!todayEnabled}
+                    onClick={this.handleTodayClick}
+                    text={todayButtonText}
+                />
                 <Button
                     disabled={!canClearSelection}
                     minimal={true}
@@ -464,3 +470,8 @@ function getInitialMonth(props: DatePickerProps, value: Date | null): Date {
         return DateUtils.getDateBetween([props.minDate, props.maxDate]);
     }
 }
+
+function isTodayEnabled(minDate: Date, maxDate: Date): boolean {
+    const today = new Date();
+    return DateUtils.isDayInRange(today, [minDate, maxDate]);
+}
diff --git a/packages/datetime/test/datePickerTests.tsx b/packages/datetime/test/datePickerTests.tsx
@@ -314,6 +314,43 @@ describe("<DatePicker>", () => {
             });
         });
 
+        describe("today button validation", () => {
+            const today = new Date();
+            const MIN_DATE_BEFORE_TODAY = MIN_DATE;
+            const MAX_DATE_BEFORE_TODAY = MAX_DATE;
+
+            const MIN_DATE_AFTER_TODAY = new Date(today.getFullYear() + 1, today.getMonth(), today.getDate());
+            const MAX_DATE_AFTER_TODAY = new Date(today.getFullYear() + 2, today.getMonth(), today.getDate());
+
+            it("min/max before today has disabled button", () => {
+                const { getTodayButton } = wrap(
+                    <DatePicker
+                        minDate={MIN_DATE_BEFORE_TODAY}
+                        maxDate={MAX_DATE_BEFORE_TODAY}
+                        showActionsBar={true}
+                    />,
+                );
+
+                assert.isTrue(getTodayButton().props().disabled);
+            });
+
+            it("min/max after today has disabled button", () => {
+                const { getTodayButton } = wrap(
+                    <DatePicker minDate={MIN_DATE_AFTER_TODAY} maxDate={MAX_DATE_AFTER_TODAY} showActionsBar={true} />,
+                );
+
+                assert.isTrue(getTodayButton().props().disabled);
+            });
+
+            it("valid min/max today has enabled button", () => {
+                const { getTodayButton } = wrap(
+                    <DatePicker minDate={MIN_DATE_BEFORE_TODAY} maxDate={MAX_DATE_AFTER_TODAY} showActionsBar={true} />,
+                );
+
+                assert.isFalse(getTodayButton().props().disabled);
+            });
+        });
+
         it("only days outside bounds have disabled class", () => {
             const minDate = new Date(2000, Months.JANUARY, 10);
             const { getDay } = wrap(<DatePicker initialMonth={minDate} minDate={minDate} />);
@@ -735,6 +772,7 @@ describe("<DatePicker>", () => {
                 wrapper
                     .find(`.${Classes.DATEPICKER_DAY}`)
                     .filterWhere(day => day.text() === "" + dayNumber && !day.hasClass(Classes.DATEPICKER_DAY_OUTSIDE)),
+            getTodayButton: () => wrapper.find(`.${Classes.DATEPICKER_FOOTER}`).find(Button).first(),
             months: wrapper.find(HTMLSelect).filter({ className: Classes.DATEPICKER_MONTH_SELECT }).find("select"),
             root: wrapper,
             setTimeInput: (precision: TimePrecision | "hour", value: number) =>