[datetime] feat: support highlightCurrentDay prop in more components

packages/datetime/src/dateInput.tsx

@@ -90,6 +90,12 @@ export interface IDateInputProps extends IDatePickerBaseProps, IDateFormatProps,
      */
     fill?: boolean;
 
+    /**
+     * Whether the current day should be highlighted in the calendar.
+     * @default false
+     */
+    highlightCurrentDay?: boolean;
+
     /**
      * Props to pass to the [input group](#core/components/text-inputs.input-group).
      * `disabled` and `value` will be ignored in favor of the top-level props on this component.

packages/datetime/src/dateRangeInput.tsx

@@ -105,6 +105,12 @@ export interface IDateRangeInputProps extends IDatePickerBaseProps, IDateFormatP
      */
     endInputProps?: HTMLInputProps & IInputGroupProps;
 
+    /**
+     * Whether the current day should be highlighted in the calendar.
+     * @default false
+     */
+    highlightCurrentDay?: boolean;
+
     /**
      * Called when the user selects a day.
      * If no days are selected, it will pass `[null, null]`.

packages/datetime/src/dateRangePicker.tsx

@@ -80,6 +80,12 @@ export interface IDateRangePickerProps extends IDatePickerBaseProps, IProps {
      */
     defaultValue?: DateRange;
 
+    /**
+     * Whether the current day should be highlighted in the calendar.
+     * @default false
+     */
+    highlightCurrentDay?: boolean;
+
     /**
      * Called when the user selects a day.
      * If no days are selected, it will pass `[null, null]`.
@@ -295,6 +301,29 @@ export class DateRangePicker extends AbstractPureComponent2<IDateRangePickerProp
         }
     }
 
+    private isToday = (date: Date) => DateUtils.areSameDay(date, new Date());
+
+    private shouldHighlightCurrentDay = (date: Date) => {
+        const { highlightCurrentDay } = this.props;
+
+        return highlightCurrentDay && this.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 +411,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 +432,7 @@ export class DateRangePicker extends AbstractPureComponent2<IDateRangePickerProp
                     numberOfMonths={1}
                     onMonthChange={this.handleLeftMonthChange}
                     toMonth={maxDate}
+                    renderDay={dayPickerProps?.renderDay ?? this.renderDay}
                 />
             );
         } else {
@@ -418,6 +448,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 +461,7 @@ export class DateRangePicker extends AbstractPureComponent2<IDateRangePickerProp
                     numberOfMonths={1}
                     onMonthChange={this.handleRightMonthChange}
                     toMonth={maxDate}
+                    renderDay={dayPickerProps?.renderDay ?? this.renderDay}
                 />,
             ];
         }