From 7af61d2c23e039b2c9b53598b8f57aeb6a5a516a Mon Sep 17 00:00:00 2001
From: Rivka Matan <rmatan@palantir.com>
Date: Fri, 6 Oct 2023 15:46:41 -0400
Subject: [PATCH 1/4] always show both timepickers; add stacked styling

---
 .../date-range-picker/_daterangepicker.scss   |  5 +++
 packages/datetime2/src/classes.ts             |  1 +
 .../date-range-picker3/dateRangePicker3.tsx   | 41 +++++++++----------
 3 files changed, 26 insertions(+), 21 deletions(-)

diff --git a/packages/datetime/src/components/date-range-picker/_daterangepicker.scss b/packages/datetime/src/components/date-range-picker/_daterangepicker.scss
index cf5eb6032a..fabbe55deb 100644
--- a/packages/datetime/src/components/date-range-picker/_daterangepicker.scss
+++ b/packages/datetime/src/components/date-range-picker/_daterangepicker.scss
@@ -115,6 +115,11 @@
   justify-content: space-around;
   width: 100%;
 
+  &.#{$ns}-daterangepicker-timepickers-stacked {
+    align-items: center;
+    flex-direction: column;
+  }
+
   .#{$ns}-timepicker-arrow-row:empty + .#{$ns}-timepicker-input-row {
     // when timepicker arrows are not displayed in the daterangepicker, we need a bit of extra margin
     margin: $datepicker-padding 0;
diff --git a/packages/datetime2/src/classes.ts b/packages/datetime2/src/classes.ts
index 04f156e5cf..5501178b0a 100644
--- a/packages/datetime2/src/classes.ts
+++ b/packages/datetime2/src/classes.ts
@@ -73,6 +73,7 @@ export const DateRangePicker3Classes = {
     DATERANGEPICKER3_SELECTED_RANGE_END: ReactDayPickerClasses.RDP_DAY_RANGE_END,
     DATERANGEPICKER3_SELECTED_RANGE_MIDDLE: ReactDayPickerClasses.RDP_DAY_RANGE_MIDDLE,
     DATERANGEPICKER3_SELECTED_RANGE_START: ReactDayPickerClasses.RDP_DAY_RANGE_START,
+    DATERANGEPICKER3_TIMEPICKERS_STACKED: `${DatetimeClasses.DATERANGEPICKER_TIMEPICKERS}-stacked`,
 };
 
 /** Class names for next-gen @blueprintjs/datetime2 "V3" components */
diff --git a/packages/datetime2/src/components/date-range-picker3/dateRangePicker3.tsx b/packages/datetime2/src/components/date-range-picker3/dateRangePicker3.tsx
index 3af62dbac4..530a0d395f 100644
--- a/packages/datetime2/src/components/date-range-picker3/dateRangePicker3.tsx
+++ b/packages/datetime2/src/components/date-range-picker3/dateRangePicker3.tsx
@@ -30,6 +30,7 @@ import {
     Errors,
     MonthAndYear,
     TimePicker,
+    TimePrecision,
 } from "@blueprintjs/datetime";
 
 import { Classes, dayPickerClassNameOverrides } from "../../classes";
@@ -262,33 +263,31 @@ export class DateRangePicker3 extends AbstractPureComponent<DateRangePicker3Prop
             return null;
         }
 
-        if (isShowingOneMonth) {
-            return (
+        const isLongTimePicker =
+            timePickerProps?.useAmPm ||
+            timePrecision === TimePrecision.SECOND ||
+            timePrecision === TimePrecision.MILLISECOND;
+
+        return (
+            <div
+                className={classNames(Classes.DATERANGEPICKER_TIMEPICKERS, {
+                    [Classes.DATERANGEPICKER3_TIMEPICKERS_STACKED]: isShowingOneMonth && isLongTimePicker,
+                })}
+            >
                 <TimePicker
                     precision={timePrecision}
                     {...timePickerProps}
                     onChange={this.handleTimeChangeLeftCalendar}
                     value={this.state.time[0]}
                 />
-            );
-        } else {
-            return (
-                <div className={Classes.DATERANGEPICKER_TIMEPICKERS}>
-                    <TimePicker
-                        precision={timePrecision}
-                        {...timePickerProps}
-                        onChange={this.handleTimeChangeLeftCalendar}
-                        value={this.state.time[0]}
-                    />
-                    <TimePicker
-                        precision={timePrecision}
-                        {...timePickerProps}
-                        onChange={this.handleTimeChangeRightCalendar}
-                        value={this.state.time[1]}
-                    />
-                </div>
-            );
-        }
+                <TimePicker
+                    precision={timePrecision}
+                    {...timePickerProps}
+                    onChange={this.handleTimeChangeRightCalendar}
+                    value={this.state.time[1]}
+                />
+            </div>
+        );
     }
 
     private handleTimeChange = (newTime: Date, dateIndex: number) => {

From d7e8a8558a5b210208e005a4a889e342748b4fb0 Mon Sep 17 00:00:00 2001
From: Adi Dahiya <adahiya@palantir.com>
Date: Thu, 12 Oct 2023 17:05:42 -0400
Subject: [PATCH 2/4] docs(DateRangePicker3): add time picker options

---
 .../dateRangePicker3Example.tsx               | 63 ++++++++++++++++---
 1 file changed, 56 insertions(+), 7 deletions(-)

diff --git a/packages/docs-app/src/examples/datetime2-examples/dateRangePicker3Example.tsx b/packages/docs-app/src/examples/datetime2-examples/dateRangePicker3Example.tsx
index 5ad85a977a..bbe5314106 100644
--- a/packages/docs-app/src/examples/datetime2-examples/dateRangePicker3Example.tsx
+++ b/packages/docs-app/src/examples/datetime2-examples/dateRangePicker3Example.tsx
@@ -16,13 +16,14 @@
 
 import * as React from "react";
 
-import { Classes, FormGroup, H5, Switch } from "@blueprintjs/core";
+import { Classes, FormGroup, Switch } from "@blueprintjs/core";
 import type { DateRange, TimePrecision } from "@blueprintjs/datetime";
 import { DateRangePicker3 } from "@blueprintjs/datetime2";
 import { Example, ExampleProps, handleBooleanChange, handleValueChange } from "@blueprintjs/docs-theme";
 
 import { CommonDateFnsLocale, DateFnsLocaleSelect } from "../../common/dateFnsLocaleSelect";
 import { FormattedDateRange } from "../../common/formattedDateRange";
+import { PropCodeTooltip } from "../../common/propCodeTooltip";
 import { PrecisionSelect } from "../datetime-examples/common/precisionSelect";
 import { MaxDateSelect, MinDateSelect } from "./common/minMaxDateSelect";
 
@@ -36,7 +37,9 @@ interface DateRangePicker3ExampleState {
     minDate: Date | undefined;
     reverseMonthAndYearMenus?: boolean;
     shortcuts?: boolean;
+    showTimeArrowButtons: boolean;
     timePrecision?: TimePrecision;
+    useAmPm?: boolean;
 }
 
 export class DateRangePicker3Example extends React.PureComponent<ExampleProps, DateRangePicker3ExampleState> {
@@ -49,7 +52,9 @@ export class DateRangePicker3Example extends React.PureComponent<ExampleProps, D
         minDate: undefined,
         reverseMonthAndYearMenus: false,
         shortcuts: true,
+        showTimeArrowButtons: false,
         singleMonthOnly: false,
+        useAmPm: false,
     };
 
     private handleDateRangeChange = (dateRange: DateRange) => this.setState({ dateRange });
@@ -64,6 +69,12 @@ export class DateRangePicker3Example extends React.PureComponent<ExampleProps, D
         this.setState({ timePrecision }),
     );
 
+    private toggleTimepickerArrowButtons = handleBooleanChange(showTimeArrowButtons =>
+        this.setState({ showTimeArrowButtons }),
+    );
+
+    private toggleUseAmPm = handleBooleanChange(useAmPm => this.setState({ useAmPm }));
+
     private toggleReverseMonthAndYearMenus = handleBooleanChange(reverseMonthAndYearMenus =>
         this.setState({ reverseMonthAndYearMenus }),
     );
@@ -79,7 +90,10 @@ export class DateRangePicker3Example extends React.PureComponent<ExampleProps, D
     });
 
     public render() {
-        const { dateRange, localeCode, maxDate, minDate, ...props } = this.state;
+        const { dateRange, localeCode, maxDate, minDate, showTimeArrowButtons, timePrecision, useAmPm, ...props } =
+            this.state;
+        const showTimePicker = timePrecision !== undefined;
+
         return (
             <Example options={this.renderOptions()} showOptionsBelowExample={true} {...this.props}>
                 <DateRangePicker3
@@ -89,17 +103,26 @@ export class DateRangePicker3Example extends React.PureComponent<ExampleProps, D
                     maxDate={maxDate}
                     minDate={minDate}
                     onChange={this.handleDateRangeChange}
+                    timePickerProps={
+                        showTimePicker
+                            ? {
+                                  precision: timePrecision,
+                                  showArrowButtons: showTimeArrowButtons,
+                                  useAmPm,
+                              }
+                            : undefined
+                    }
                 />
-                <FormattedDateRange range={dateRange} showTime={props.timePrecision !== undefined} />
+                <FormattedDateRange range={dateRange} showTime={showTimePicker} />
             </Example>
         );
     }
 
     private renderOptions() {
+        const showTimePicker = this.state.timePrecision !== undefined;
         return (
             <>
                 <div>
-                    <H5>Props</H5>
                     <Switch
                         checked={this.state.allowSingleDayRange}
                         label="Allow single day range"
@@ -126,6 +149,13 @@ export class DateRangePicker3Example extends React.PureComponent<ExampleProps, D
                 <div>
                     <MinDateSelect onChange={this.handleMinDateChange} />
                     <MaxDateSelect onChange={this.handleMaxDateChange} />
+                    <FormGroup label="Locale">
+                        <DateFnsLocaleSelect
+                            value={this.state.localeCode}
+                            onChange={this.handleLocaleCodeChange}
+                            popoverProps={{ matchTargetWidth: true }}
+                        />
+                    </FormGroup>
                 </div>
                 <div>
                     <PrecisionSelect
@@ -134,9 +164,28 @@ export class DateRangePicker3Example extends React.PureComponent<ExampleProps, D
                         value={this.state.timePrecision}
                         onChange={this.handlePrecisionChange}
                     />
-                    <FormGroup label="Locale">
-                        <DateFnsLocaleSelect value={this.state.localeCode} onChange={this.handleLocaleCodeChange} />
-                    </FormGroup>
+                    <PropCodeTooltip
+                        snippet={`timePickerProps={{ showArrowButtons: ${this.state.showTimeArrowButtons.toString()} }}`}
+                        disabled={!showTimePicker}
+                    >
+                        <Switch
+                            disabled={!showTimePicker}
+                            checked={this.state.showTimeArrowButtons}
+                            label="Time picker arrows"
+                            onChange={this.toggleTimepickerArrowButtons}
+                        />
+                    </PropCodeTooltip>
+                    <PropCodeTooltip
+                        snippet={`timePickerProps={{ useAmPm: ${this.state.useAmPm.toString()} }}`}
+                        disabled={!showTimePicker}
+                    >
+                        <Switch
+                            disabled={!showTimePicker}
+                            checked={this.state.useAmPm}
+                            label="Use AM/PM"
+                            onChange={this.toggleUseAmPm}
+                        />
+                    </PropCodeTooltip>
                 </div>
             </>
         );

From ccaf2df6e8a8ea0d148b01a541b231dc104bdc91 Mon Sep 17 00:00:00 2001
From: Adi Dahiya <adahiya@palantir.com>
Date: Thu, 12 Oct 2023 17:12:42 -0400
Subject: [PATCH 3/4] fix time picker stacking

---
 .../src/components/date-range-picker/_daterangepicker.scss | 5 -----
 .../components/date-range-picker3/_date-range-picker3.scss | 7 +++++++
 .../src/components/date-range-picker3/dateRangePicker3.tsx | 3 ++-
 3 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/packages/datetime/src/components/date-range-picker/_daterangepicker.scss b/packages/datetime/src/components/date-range-picker/_daterangepicker.scss
index fabbe55deb..cf5eb6032a 100644
--- a/packages/datetime/src/components/date-range-picker/_daterangepicker.scss
+++ b/packages/datetime/src/components/date-range-picker/_daterangepicker.scss
@@ -115,11 +115,6 @@
   justify-content: space-around;
   width: 100%;
 
-  &.#{$ns}-daterangepicker-timepickers-stacked {
-    align-items: center;
-    flex-direction: column;
-  }
-
   .#{$ns}-timepicker-arrow-row:empty + .#{$ns}-timepicker-input-row {
     // when timepicker arrows are not displayed in the daterangepicker, we need a bit of extra margin
     margin: $datepicker-padding 0;
diff --git a/packages/datetime2/src/components/date-range-picker3/_date-range-picker3.scss b/packages/datetime2/src/components/date-range-picker3/_date-range-picker3.scss
index 161de657a0..03e35b90a7 100644
--- a/packages/datetime2/src/components/date-range-picker3/_date-range-picker3.scss
+++ b/packages/datetime2/src/components/date-range-picker3/_date-range-picker3.scss
@@ -121,6 +121,13 @@
   /* stylelint-enable max-line-length */
 }
 
+.#{$ns}-daterangepicker-timepickers {
+  &.#{$ns}-daterangepicker-timepickers-stacked {
+    align-items: center;
+    flex-direction: column;
+  }
+}
+
 .#{$ns}-dark .#{$ns}-daterangepicker {
   &.#{$ns}-datepicker .rdp-day {
     &_hovered {
diff --git a/packages/datetime2/src/components/date-range-picker3/dateRangePicker3.tsx b/packages/datetime2/src/components/date-range-picker3/dateRangePicker3.tsx
index 49b782e04c..f0246e07c7 100644
--- a/packages/datetime2/src/components/date-range-picker3/dateRangePicker3.tsx
+++ b/packages/datetime2/src/components/date-range-picker3/dateRangePicker3.tsx
@@ -226,7 +226,8 @@ export class DateRangePicker3 extends DateFnsLocalizedComponent<DateRangePicker3
     }
 
     private maybeRenderTimePickers(isShowingOneMonth: boolean) {
-        const { timePrecision, timePickerProps } = this.props;
+        // timePrecision may be set as a root prop or as a property inside timePickerProps, so we need to check both
+        const { timePickerProps, timePrecision = timePickerProps?.precision } = this.props;
         if (timePrecision == null && timePickerProps === DateRangePicker3.defaultProps.timePickerProps) {
             return null;
         }

From d52d1c3747f61a150b382a4c5d5272a6bb604d0c Mon Sep 17 00:00:00 2001
From: Adi Dahiya <adahiya@palantir.com>
Date: Thu, 12 Oct 2023 17:17:08 -0400
Subject: [PATCH 4/4] fix/improve docs examples

---
 .../dateRangeInput3Example.tsx                | 20 ++++++++++++++++++-
 .../dateRangePicker3Example.tsx               | 15 ++++++--------
 2 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/packages/docs-app/src/examples/datetime2-examples/dateRangeInput3Example.tsx b/packages/docs-app/src/examples/datetime2-examples/dateRangeInput3Example.tsx
index e9aecf7877..099f26b147 100644
--- a/packages/docs-app/src/examples/datetime2-examples/dateRangeInput3Example.tsx
+++ b/packages/docs-app/src/examples/datetime2-examples/dateRangeInput3Example.tsx
@@ -51,6 +51,7 @@ interface DateRangeInput3ExampleState {
     showTimeArrowButtons: boolean;
     singleMonthOnly: boolean;
     timePrecision: TimePrecision | undefined;
+    useAmPm: boolean;
 }
 
 export class DateRangeInput3Example extends React.PureComponent<ExampleProps, DateRangeInput3ExampleState> {
@@ -71,6 +72,7 @@ export class DateRangeInput3Example extends React.PureComponent<ExampleProps, Da
         showTimeArrowButtons: false,
         singleMonthOnly: false,
         timePrecision: TimePrecision.MINUTE,
+        useAmPm: false,
     };
 
     private toggleContiguous = handleBooleanChange(contiguous => {
@@ -103,6 +105,8 @@ export class DateRangeInput3Example extends React.PureComponent<ExampleProps, Da
         this.setState({ showTimeArrowButtons }),
     );
 
+    private toggleUseAmPm = handleBooleanChange(useAmPm => this.setState({ useAmPm }));
+
     private handleFormatChange = (dateFnsFormat: string) => this.setState({ dateFnsFormat });
 
     private handleLocaleCodeChange = (localeCode: CommonDateFnsLocale) => this.setState({ localeCode });
@@ -121,6 +125,7 @@ export class DateRangeInput3Example extends React.PureComponent<ExampleProps, Da
             showFooterElement,
             showTimeArrowButtons,
             timePrecision,
+            useAmPm,
             ...spreadProps
         } = this.state;
         return (
@@ -133,7 +138,7 @@ export class DateRangeInput3Example extends React.PureComponent<ExampleProps, Da
                     footerElement={showFooterElement ? exampleFooterElement : undefined}
                     timePickerProps={
                         enableTimePicker
-                            ? { precision: timePrecision, showArrowButtons: showTimeArrowButtons }
+                            ? { precision: timePrecision, showArrowButtons: showTimeArrowButtons, useAmPm }
                             : undefined
                     }
                 />
@@ -157,7 +162,9 @@ export class DateRangeInput3Example extends React.PureComponent<ExampleProps, Da
             showTimeArrowButtons,
             singleMonthOnly,
             timePrecision,
+            useAmPm,
         } = this.state;
+
         return (
             <>
                 <div>
@@ -245,6 +252,17 @@ export class DateRangeInput3Example extends React.PureComponent<ExampleProps, Da
                             onChange={this.toggleTimepickerArrowButtons}
                         />
                     </PropCodeTooltip>
+                    <PropCodeTooltip
+                        snippet={`timePickerProps={{ useAmPm: ${useAmPm.toString()} }}`}
+                        disabled={!enableTimePicker}
+                    >
+                        <Switch
+                            disabled={!enableTimePicker}
+                            checked={useAmPm}
+                            label="Use AM/PM"
+                            onChange={this.toggleUseAmPm}
+                        />
+                    </PropCodeTooltip>
                 </div>
             </>
         );
diff --git a/packages/docs-app/src/examples/datetime2-examples/dateRangePicker3Example.tsx b/packages/docs-app/src/examples/datetime2-examples/dateRangePicker3Example.tsx
index bbe5314106..11bfe010a9 100644
--- a/packages/docs-app/src/examples/datetime2-examples/dateRangePicker3Example.tsx
+++ b/packages/docs-app/src/examples/datetime2-examples/dateRangePicker3Example.tsx
@@ -38,8 +38,8 @@ interface DateRangePicker3ExampleState {
     reverseMonthAndYearMenus?: boolean;
     shortcuts?: boolean;
     showTimeArrowButtons: boolean;
-    timePrecision?: TimePrecision;
-    useAmPm?: boolean;
+    timePrecision: TimePrecision | undefined;
+    useAmPm: boolean;
 }
 
 export class DateRangePicker3Example extends React.PureComponent<ExampleProps, DateRangePicker3ExampleState> {
@@ -54,6 +54,7 @@ export class DateRangePicker3Example extends React.PureComponent<ExampleProps, D
         shortcuts: true,
         showTimeArrowButtons: false,
         singleMonthOnly: false,
+        timePrecision: undefined,
         useAmPm: false,
     };
 
@@ -65,8 +66,8 @@ export class DateRangePicker3Example extends React.PureComponent<ExampleProps, D
 
     private handleMinDateChange = (minDate: Date) => this.setState({ minDate });
 
-    private handlePrecisionChange = handleValueChange((timePrecision: TimePrecision | undefined) =>
-        this.setState({ timePrecision }),
+    private handlePrecisionChange = handleValueChange((timePrecision: TimePrecision | "none") =>
+        this.setState({ timePrecision: timePrecision === "none" ? undefined : timePrecision }),
     );
 
     private toggleTimepickerArrowButtons = handleBooleanChange(showTimeArrowButtons =>
@@ -105,11 +106,7 @@ export class DateRangePicker3Example extends React.PureComponent<ExampleProps, D
                     onChange={this.handleDateRangeChange}
                     timePickerProps={
                         showTimePicker
-                            ? {
-                                  precision: timePrecision,
-                                  showArrowButtons: showTimeArrowButtons,
-                                  useAmPm,
-                              }
+                            ? { precision: timePrecision, showArrowButtons: showTimeArrowButtons, useAmPm }
                             : undefined
                     }
                 />