From 33f35f6b5eec09ac2c2c191d847a6718e7ddd784 Mon Sep 17 00:00:00 2001
From: tanmoyopenroot <tanmoy.openroot@gmail.com>
Date: Thu, 27 Jun 2019 10:45:53 +0530
Subject: [PATCH 1/4] add highlightCurrentDay prop with test

---
 packages/datetime/src/_datepicker.scss        |  8 ++++
 packages/datetime/src/common/classes.ts       |  1 +
 packages/datetime/src/datePicker.tsx          | 37 +++++++++++++------
 packages/datetime/test/datePickerTests.tsx    | 10 +++++
 .../datetime-examples/datePickerExample.tsx   |  8 ++++
 5 files changed, 53 insertions(+), 11 deletions(-)

diff --git a/packages/datetime/src/_datepicker.scss b/packages/datetime/src/_datepicker.scss
index 5cc8050112..3af55f6533 100644
--- a/packages/datetime/src/_datepicker.scss
+++ b/packages/datetime/src/_datepicker.scss
@@ -97,6 +97,10 @@ $header-margin: ($header-height - $pt-input-height) / 2 !default;
       color: $pt-text-color-disabled;
     }
 
+    &.DayPicker-Day--isToday {
+      outline: 1px solid $pt-divider-black;
+    }
+
     &:hover,
     &:focus {
       background: $datepicker-day-background-color-hover;
@@ -196,6 +200,10 @@ $header-margin: ($header-height - $pt-input-height) / 2 !default;
       color: $pt-dark-text-color-disabled;
     }
 
+    &.DayPicker-Day--isToday {
+      outline: 1px solid $pt-dark-divider-white;
+    }
+
     &:hover,
     &:focus {
       background: $dark-datepicker-day-background-color-hover;
diff --git a/packages/datetime/src/common/classes.ts b/packages/datetime/src/common/classes.ts
index e0b45e0600..26311c4046 100644
--- a/packages/datetime/src/common/classes.ts
+++ b/packages/datetime/src/common/classes.ts
@@ -30,6 +30,7 @@ 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_FOOTER = `${DATEPICKER}-footer`;
 export const DATEPICKER_MONTH_SELECT = `${DATEPICKER}-month-select`;
 export const DATEPICKER_YEAR_SELECT = `${DATEPICKER}-year-select`;
diff --git a/packages/datetime/src/datePicker.tsx b/packages/datetime/src/datePicker.tsx
index 14f2c1c22e..6c12f50313 100644
--- a/packages/datetime/src/datePicker.tsx
+++ b/packages/datetime/src/datePicker.tsx
@@ -50,6 +50,12 @@ export interface IDatePickerProps extends IDatePickerBaseProps, IProps {
      */
     defaultValue?: Date;
 
+    /**
+     * Whether current day should be highlight 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}
@@ -195,6 +193,23 @@ 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 disabledDays = (day: Date) => !DateUtils.isDayInRange(day, [this.props.minDate, this.props.maxDate]);
 
     private getDisabledDaysModifier = () => {
diff --git a/packages/datetime/test/datePickerTests.tsx b/packages/datetime/test/datePickerTests.tsx
index b184eb0c53..589fdcc857 100644
--- a/packages/datetime/test/datePickerTests.tsx
+++ b/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;
diff --git a/packages/docs-app/src/examples/datetime-examples/datePickerExample.tsx b/packages/docs-app/src/examples/datetime-examples/datePickerExample.tsx
index 81fd9c1020..4c5c7b8d28 100644
--- a/packages/docs-app/src/examples/datetime-examples/datePickerExample.tsx
+++ b/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"

From 9b4ebd05b5d3f9d3ff6c3860aff8d4cf4ca84a61 Mon Sep 17 00:00:00 2001
From: tanmoyopenroot <tanmoy.openroot@gmail.com>
Date: Thu, 27 Jun 2019 10:50:26 +0530
Subject: [PATCH 2/4] fix highlightCurrentDay docs

---
 packages/datetime/src/datePicker.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/datetime/src/datePicker.tsx b/packages/datetime/src/datePicker.tsx
index 6c12f50313..cf8ce31901 100644
--- a/packages/datetime/src/datePicker.tsx
+++ b/packages/datetime/src/datePicker.tsx
@@ -51,7 +51,7 @@ export interface IDatePickerProps extends IDatePickerBaseProps, IProps {
     defaultValue?: Date;
 
     /**
-     * Whether current day should be highlight in the calendar.
+     * Whether the current day should be highlighted in the calendar.
      * @default false
      */
     highlightCurrentDay?: boolean;

From f5789ecb9e6b39f83af0d5d26678ffee45b7486a Mon Sep 17 00:00:00 2001
From: tanmoyopenroot <tanmoy.openroot@gmail.com>
Date: Sat, 29 Jun 2019 22:26:22 +0530
Subject: [PATCH 3/4] make focus style accessible

---
 packages/datetime/src/_datepicker.scss | 12 ++++++++++--
 packages/datetime/src/datePicker.tsx   |  7 +++++++
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/packages/datetime/src/_datepicker.scss b/packages/datetime/src/_datepicker.scss
index 3af55f6533..9c4123395a 100644
--- a/packages/datetime/src/_datepicker.scss
+++ b/packages/datetime/src/_datepicker.scss
@@ -98,7 +98,11 @@ $header-margin: ($header-height - $pt-input-height) / 2 !default;
     }
 
     &.DayPicker-Day--isToday {
-      outline: 1px solid $pt-divider-black;
+      span {
+        border: 1px solid $pt-divider-black;
+        border-radius: $pt-border-radius;
+        padding: 6px;
+      }
     }
 
     &:hover,
@@ -201,7 +205,11 @@ $header-margin: ($header-height - $pt-input-height) / 2 !default;
     }
 
     &.DayPicker-Day--isToday {
-      outline: 1px solid $pt-dark-divider-white;
+      span {
+        border: 1px solid $pt-dark-divider-white;
+        border-radius: $pt-border-radius;
+        padding: 6px;
+      }
     }
 
     &:hover,
diff --git a/packages/datetime/src/datePicker.tsx b/packages/datetime/src/datePicker.tsx
index cf8ce31901..950e899f96 100644
--- a/packages/datetime/src/datePicker.tsx
+++ b/packages/datetime/src/datePicker.tsx
@@ -148,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()}
@@ -210,6 +211,12 @@ export class DatePicker extends AbstractPureComponent<IDatePickerProps, IDatePic
         };
     };
 
+    private renderDay = (day: Date) => {
+        const date = day.getDate();
+
+        return <span>{date}</span>;
+    };
+
     private disabledDays = (day: Date) => !DateUtils.isDayInRange(day, [this.props.minDate, this.props.maxDate]);
 
     private getDisabledDaysModifier = () => {

From 471e71723d0cb496f4aada3f72e2f3916d634cd3 Mon Sep 17 00:00:00 2001
From: tanmoyopenroot <tanmoy.openroot@gmail.com>
Date: Tue, 2 Jul 2019 22:16:28 +0530
Subject: [PATCH 4/4] use classes and div instead of span

---
 packages/datetime/src/_datepicker.scss  | 13 +++++++------
 packages/datetime/src/common/classes.ts |  1 +
 packages/datetime/src/datePicker.tsx    |  2 +-
 3 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/packages/datetime/src/_datepicker.scss b/packages/datetime/src/_datepicker.scss
index 9c4123395a..1c087f46cc 100644
--- a/packages/datetime/src/_datepicker.scss
+++ b/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;
@@ -98,10 +103,8 @@ $header-margin: ($header-height - $pt-input-height) / 2 !default;
     }
 
     &.DayPicker-Day--isToday {
-      span {
+      .#{$ns}-datepicker-day-wrapper {
         border: 1px solid $pt-divider-black;
-        border-radius: $pt-border-radius;
-        padding: 6px;
       }
     }
 
@@ -205,10 +208,8 @@ $header-margin: ($header-height - $pt-input-height) / 2 !default;
     }
 
     &.DayPicker-Day--isToday {
-      span {
+      .#{$ns}-datepicker-day-wrapper {
         border: 1px solid $pt-dark-divider-white;
-        border-radius: $pt-border-radius;
-        padding: 6px;
       }
     }
 
diff --git a/packages/datetime/src/common/classes.ts b/packages/datetime/src/common/classes.ts
index 26311c4046..893ae00ef3 100644
--- a/packages/datetime/src/common/classes.ts
+++ b/packages/datetime/src/common/classes.ts
@@ -31,6 +31,7 @@ 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`;
diff --git a/packages/datetime/src/datePicker.tsx b/packages/datetime/src/datePicker.tsx
index 950e899f96..f778d7719c 100644
--- a/packages/datetime/src/datePicker.tsx
+++ b/packages/datetime/src/datePicker.tsx
@@ -214,7 +214,7 @@ export class DatePicker extends AbstractPureComponent<IDatePickerProps, IDatePic
     private renderDay = (day: Date) => {
         const date = day.getDate();
 
-        return <span>{date}</span>;
+        return <div className={Classes.DATEPICKER_DAY_WRAPPER}>{date}</div>;
     };
 
     private disabledDays = (day: Date) => !DateUtils.isDayInRange(day, [this.props.minDate, this.props.maxDate]);