[datetime] feat(DatePicker): add option to highlight current day

packages/datetime/src/_datepicker.scss

@@ -37,6 +37,11 @@ $header-margin: ($header-height - $pt-input-height) / 2 !default;
     }
   }
 
+  .#{$ns}-datepicker-day-wrapper {
+    border-radius: $pt-border-radius;
+    padding: 7px;
+  }
+
   .DayPicker-Month {
     display: inline-table;
     margin: 0 $datepicker-padding $datepicker-padding;
@@ -97,6 +102,12 @@ $header-margin: ($header-height - $pt-input-height) / 2 !default;
       color: $pt-text-color-disabled;
     }
 
+    &.DayPicker-Day--isToday {
+      .#{$ns}-datepicker-day-wrapper {
+        border: 1px solid $pt-divider-black;
+      }
+    }
+
     &:hover,
     &:focus {
       background: $datepicker-day-background-color-hover;
@@ -196,6 +207,12 @@ $header-margin: ($header-height - $pt-input-height) / 2 !default;
       color: $pt-dark-text-color-disabled;
     }
 
+    &.DayPicker-Day--isToday {
+      .#{$ns}-datepicker-day-wrapper {
+        border: 1px solid $pt-dark-divider-white;
+      }
+    }
+
     &:hover,
     &:focus {
       background: $dark-datepicker-day-background-color-hover;

packages/datetime/src/common/classes.ts

@@ -30,6 +30,8 @@ export const DATEPICKER_DAY = "DayPicker-Day";
 export const DATEPICKER_DAY_DISABLED = `${DATEPICKER_DAY}--disabled`;
 export const DATEPICKER_DAY_OUTSIDE = `${DATEPICKER_DAY}--outside`;
 export const DATEPICKER_DAY_SELECTED = `${DATEPICKER_DAY}--selected`;
+export const DATEPICKER_DAY_IS_TODAY = `${DATEPICKER_DAY}--isToday`;
+export const DATEPICKER_DAY_WRAPPER = `${DATEPICKER}-day-wrapper`;
 export const DATEPICKER_FOOTER = `${DATEPICKER}-footer`;
 export const DATEPICKER_MONTH_SELECT = `${DATEPICKER}-month-select`;
 export const DATEPICKER_YEAR_SELECT = `${DATEPICKER}-year-select`;

packages/datetime/src/datePicker.tsx

@@ -50,6 +50,12 @@ export interface IDatePickerProps extends IDatePickerBaseProps, IProps {
      */
     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
@@ -95,6 +101,7 @@ export class DatePicker extends AbstractPureComponent<IDatePickerProps, IDatePic
         canClearSelection: true,
         clearButtonText: "Clear",
         dayPickerProps: {},
+        highlightCurrentDay: false,
         maxDate: getDefaultMaxDate(),
         minDate: getDefaultMinDate(),
         reverseMonthAndYearMenus: false,
@@ -120,16 +127,7 @@ export class DatePicker extends AbstractPureComponent<IDatePickerProps, IDatePic
     }
 
     public render() {
-        const {
-            className,
-            dayPickerProps,
-            locale,
-            localeUtils,
-            maxDate,
-            minDate,
-            modifiers,
-            showActionsBar,
-        } = this.props;
+        const { className, dayPickerProps, locale, localeUtils, maxDate, minDate, showActionsBar } = this.props;
         const { displayMonth, displayYear } = this.state;
 
         return (
@@ -138,7 +136,7 @@ export class DatePicker extends AbstractPureComponent<IDatePickerProps, IDatePic
                     showOutsideDays={true}
                     locale={locale}
                     localeUtils={localeUtils}
-                    modifiers={modifiers}
+                    modifiers={this.getDatePickerModifiers()}
                     {...dayPickerProps}
                     canChangeMonth={true}
                     captionElement={this.renderCaption}
@@ -150,6 +148,7 @@ export class DatePicker extends AbstractPureComponent<IDatePickerProps, IDatePic
                     onMonthChange={this.handleMonthChange}
                     selectedDays={this.state.value}
                     toMonth={maxDate}
+                    renderDay={this.renderDay}
                 />
                 {this.maybeRenderTimePicker()}
                 {showActionsBar && this.renderOptionsBar()}
@@ -195,6 +194,29 @@ export class DatePicker extends AbstractPureComponent<IDatePickerProps, IDatePic
         }
     }
 
+    private isToday = (date: Date) => DateUtils.areSameDay(date, new Date());
+
+    private shouldHighlightCurrentDay = (date: Date) => {
+        const { highlightCurrentDay } = this.props;
+
+        return highlightCurrentDay && this.isToday(date);
+    };
+
+    private getDatePickerModifiers = () => {
+        const { modifiers } = this.props;
+
+        return {
+            isToday: this.shouldHighlightCurrentDay,
+            ...modifiers,
+        };
+    };
+
+    private renderDay = (day: Date) => {
+        const date = day.getDate();
+
+        return <div className={Classes.DATEPICKER_DAY_WRAPPER}>{date}</div>;
+    };
+
     private disabledDays = (day: Date) => !DateUtils.isDayInRange(day, [this.props.minDate, this.props.maxDate]);
 
     private getDisabledDaysModifier = () => {

packages/datetime/test/datePickerTests.tsx

@@ -41,6 +41,16 @@ describe("<DatePicker>", () => {
         assert.isNull(root.state("selectedDay"));
     });
 
+    it("current day is not highlighted by default", () => {
+        const { root } = wrap(<DatePicker />);
+        assert.lengthOf(root.find(`.${Classes.DATEPICKER_DAY_IS_TODAY}`), 0);
+    });
+
+    it("current day should be highlighted when highlightCurrentDay={true}", () => {
+        const { root } = wrap(<DatePicker highlightCurrentDay={true} />);
+        assert.lengthOf(root.find(`.${Classes.DATEPICKER_DAY_IS_TODAY}`), 1);
+    });
+
     describe("reconciliates dayPickerProps", () => {
         it("week starts with firstDayOfWeek value", () => {
             const selectedFirstDay = 3;

packages/docs-app/src/examples/datetime-examples/datePickerExample.tsx

@@ -24,6 +24,7 @@ import { PrecisionSelect } from "./common/precisionSelect";
 
 export interface IDatePickerExampleState {
     date: Date | null;
+    highlightCurrentDay: boolean;
     reverseMonthAndYearMenus: boolean;
     showActionsBar: boolean;
     timePrecision: TimePrecision | undefined;
@@ -32,11 +33,13 @@ export interface IDatePickerExampleState {
 export class DatePickerExample extends React.PureComponent<IExampleProps, IDatePickerExampleState> {
     public state: IDatePickerExampleState = {
         date: null,
+        highlightCurrentDay: false,
         reverseMonthAndYearMenus: false,
         showActionsBar: false,
         timePrecision: undefined,
     };
 
+    private toggleHighlight = handleBooleanChange(highlightCurrentDay => this.setState({ highlightCurrentDay }));
     private toggleActionsBar = handleBooleanChange(showActionsBar => this.setState({ showActionsBar }));
     private toggleReverseMenus = handleBooleanChange(reverse => this.setState({ reverseMonthAndYearMenus: reverse }));
     private handlePrecisionChange = handleStringChange((p: TimePrecision | "none") =>
@@ -50,6 +53,11 @@ export class DatePickerExample extends React.PureComponent<IExampleProps, IDateP
             <>
                 <H5>Props</H5>
                 <Switch checked={props.showActionsBar} label="Show actions bar" onChange={this.toggleActionsBar} />
+                <Switch
+                    checked={props.highlightCurrentDay}
+                    label="Highlight current day"
+                    onChange={this.toggleHighlight}
+                />
                 <Switch
                     checked={props.reverseMonthAndYearMenus}
                     label="Reverse month and year menus"