[datetime] feat: support highlightCurrentDay prop in more components

packages/datetime/src/common/dateUtils.ts

@@ -234,3 +234,7 @@ export function get24HourFrom12Hour(hour: number, isPm: boolean): number {
     const newHour = hour === 12 ? 0 : hour;
     return isPm ? newHour + 12 : newHour;
 }
+
+export function isToday(date: Date): boolean {
+    return areSameDay(date, new Date());
+}

packages/datetime/src/dateInput.tsx

@@ -16,7 +16,6 @@
 
 import classNames from "classnames";
 import * as React from "react";
-import { DayPickerProps } from "react-day-picker";
 import { polyfill } from "react-lifecycles-compat";
 
 import {
@@ -64,16 +63,6 @@ export interface IDateInputProps extends IDatePickerBaseProps, IDateFormatProps,
      */
     closeOnSelection?: boolean;
 
-    /**
-     * Props to pass to ReactDayPicker. See API documentation
-     * [here](http://react-day-picker.js.org/api/DayPicker).
-     *
-     * The following props are managed by the component and cannot be configured:
-     * `canChangeMonth`, `captionElement`, `fromMonth` (use `minDate`), `month` (use
-     * `initialMonth`), `toMonth` (use `maxDate`).
-     */
-    dayPickerProps?: DayPickerProps;
-
     /**
      * Whether the date input is non-interactive.
      * @default false

packages/datetime/src/datePicker.tsx

@@ -17,7 +17,7 @@
 import { AbstractPureComponent2, Button, DISPLAYNAME_PREFIX, Divider, IProps } from "@blueprintjs/core";
 import classNames from "classnames";
 import * as React from "react";
-import DayPicker, { CaptionElementProps, DayModifiers, DayPickerProps, NavbarElementProps } from "react-day-picker";
+import DayPicker, { CaptionElementProps, DayModifiers, NavbarElementProps } from "react-day-picker";
 import { polyfill } from "react-lifecycles-compat";
 
 import * as Classes from "./common/classes";
@@ -36,34 +36,12 @@ export interface IDatePickerProps extends IDatePickerBaseProps, IProps {
      */
     canClearSelection?: boolean;
 
-    /**
-     * Props to pass to ReactDayPicker. See API documentation
-     * [here](http://react-day-picker.js.org/api/DayPicker).
-     *
-     * The following props are managed by the component and cannot be configured:
-     * `canChangeMonth`, `captionElement`, `fromMonth` (use `minDate`), `month` (use
-     * `initialMonth`), `toMonth` (use `maxDate`).
-     *
-     * In case of supplying your owner `renderDay` function, make sure to apply the appropriate
-     * CSS wrapper class to obtain default Blueprint styling.
-     * eg.
-     * `<div className={Classes.DATEPICKER_DAY_WRAPPER}>{CONTENT_HERE}</div>`
-     *
-     */
-    dayPickerProps?: DayPickerProps;
-
     /**
      * Initial day the calendar will display as selected.
      * This should not be set if `value` is set.
      */
     defaultValue?: Date;
 
-    /**
-     * Whether the current day should be highlighted in the calendar.
-     * @default false
-     */
-    highlightCurrentDay?: boolean;
-
     /**
      * Called when the user selects a day.
      * If being used in an uncontrolled manner, `selectedDate` will be `null` if the user clicks the currently selected
@@ -233,12 +211,10 @@ export class DatePicker extends AbstractPureComponent2<IDatePickerProps, IDatePi
         }
     }
 
-    private isToday = (date: Date) => DateUtils.areSameDay(date, new Date());
-
     private shouldHighlightCurrentDay = (date: Date) => {
         const { highlightCurrentDay } = this.props;
 
-        return highlightCurrentDay && this.isToday(date);
+        return highlightCurrentDay && DateUtils.isToday(date);
     };
 
     private getDatePickerModifiers = () => {

packages/datetime/src/datePickerCore.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { LocaleUtils } from "react-day-picker";
+import { DayPickerProps, LocaleUtils } from "react-day-picker";
 import { Months } from "./common/months";
 import { ITimePickerProps, TimePrecision } from "./timePicker";
 
@@ -29,6 +29,28 @@ export interface IDatePickerModifiers {
 }
 
 export interface IDatePickerBaseProps {
+    /**
+     * Props to pass to ReactDayPicker. See API documentation
+     * [here](http://react-day-picker.js.org/api/DayPicker).
+     *
+     * The following props are managed by the component and cannot be configured:
+     * `canChangeMonth`, `captionElement`, `fromMonth` (use `minDate`), `month` (use
+     * `initialMonth`), `toMonth` (use `maxDate`).
+     *
+     * In case of supplying your owner `renderDay` function, make sure to apply the appropriate
+     * CSS wrapper class to obtain default Blueprint styling.
+     * eg.
+     * `<div className={Classes.DATEPICKER_DAY_WRAPPER}>{CONTENT_HERE}</div>`
+     *
+     */
+    dayPickerProps?: DayPickerProps;
+
+    /**
+     * Whether the current day should be highlighted in the calendar.
+     * @default false
+     */
+    highlightCurrentDay?: boolean;
+
     /**
      * The initial month the calendar displays.
      */

packages/datetime/src/dateRangeInput.tsx

@@ -16,7 +16,7 @@
 
 import classNames from "classnames";
 import * as React from "react";
-import DayPicker, { DayPickerProps } from "react-day-picker";
+import DayPicker from "react-day-picker";
 import { polyfill } from "react-lifecycles-compat";
 
 import {
@@ -76,16 +76,6 @@ export interface IDateRangeInputProps extends IDatePickerBaseProps, IDateFormatP
      */
     contiguousCalendarMonths?: boolean;
 
-    /**
-     * Props to pass to ReactDayPicker. See API documentation
-     * [here](http://react-day-picker.js.org/api/DayPicker).
-     *
-     * The following props are managed by the component and cannot be configured:
-     * `canChangeMonth`, `captionElement`, `numberOfMonths`, `fromMonth` (use
-     * `minDate`), `month` (use `initialMonth`), `toMonth` (use `maxDate`).
-     */
-    dayPickerProps?: DayPickerProps;
-
     /**
      * The default date range to be used in the component when uncontrolled.
      * This will be ignored if `value` is set.

packages/datetime/src/dateRangePicker.tsx

@@ -64,15 +64,6 @@ export interface IDateRangePickerProps extends IDatePickerBaseProps, IProps {
      * @default true
      */
     contiguousCalendarMonths?: boolean;
-    /**
-     * Props to pass to ReactDayPicker. See API documentation
-     * [here](http://react-day-picker.js.org/api/DayPicker).
-     *
-     * The following props are managed by the component and cannot be configured:
-     * `canChangeMonth`, `captionElement`, `numberOfMonths`, `fromMonth` (use
-     * `minDate`), `month` (use `initialMonth`), `toMonth` (use `maxDate`).
-     */
-    dayPickerProps?: DayPickerProps;
 
     /**
      * Initial `DateRange` the calendar will display as selected.
@@ -295,6 +286,27 @@ export class DateRangePicker extends AbstractPureComponent2<IDateRangePickerProp
         }
     }
 
+    private shouldHighlightCurrentDay = (date: Date) => {
+        const { highlightCurrentDay } = this.props;
+
+        return highlightCurrentDay && DateUtils.isToday(date);
+    };
+
+    private getDateRangePickerModifiers = () => {
+        const { modifiers } = this.props;
+
+        return combineModifiers(this.modifiers, {
+            isToday: this.shouldHighlightCurrentDay,
+            ...modifiers,
+        });
+    };
+
+    private renderDay = (day: Date) => {
+        const date = day.getDate();
+
+        return <div className={DateClasses.DATEPICKER_DAY_WRAPPER}>{date}</div>;
+    };
+
     private disabledDays = (day: Date) => !DateUtils.isDayInRange(day, [this.props.minDate, this.props.maxDate]);
 
     private getDisabledDaysModifier = () => {
@@ -382,7 +394,7 @@ export class DateRangePicker extends AbstractPureComponent2<IDateRangePickerProp
         const dayPickerBaseProps: DayPickerProps = {
             locale,
             localeUtils,
-            modifiers: combineModifiers(this.modifiers, this.props.modifiers),
+            modifiers: this.getDateRangePickerModifiers(),
             showOutsideDays: true,
             ...dayPickerProps,
             disabledDays: this.getDisabledDaysModifier(),
@@ -403,6 +415,7 @@ export class DateRangePicker extends AbstractPureComponent2<IDateRangePickerProp
                     numberOfMonths={1}
                     onMonthChange={this.handleLeftMonthChange}
                     toMonth={maxDate}
+                    renderDay={dayPickerProps?.renderDay ?? this.renderDay}
                 />
             );
         } else {
@@ -418,6 +431,7 @@ export class DateRangePicker extends AbstractPureComponent2<IDateRangePickerProp
                     numberOfMonths={1}
                     onMonthChange={this.handleLeftMonthChange}
                     toMonth={DateUtils.getDatePreviousMonth(maxDate)}
+                    renderDay={dayPickerProps?.renderDay ?? this.renderDay}
                 />,
                 <DayPicker
                     key="right"
@@ -430,6 +444,7 @@ export class DateRangePicker extends AbstractPureComponent2<IDateRangePickerProp
                     numberOfMonths={1}
                     onMonthChange={this.handleRightMonthChange}
                     toMonth={maxDate}
+                    renderDay={dayPickerProps?.renderDay ?? this.renderDay}
                 />,
             ];
         }