[datetime2] fix(DRP3): show both timepickers for single month

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 */

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 {

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";
@@ -225,38 +226,37 @@ 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;
         }
 
-        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) => {

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>
             </>
         );

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;
-    timePrecision?: TimePrecision;
+    showTimeArrowButtons: boolean;
+    timePrecision: TimePrecision | undefined;
+    useAmPm: boolean;
 }
 
 export class DateRangePicker3Example extends React.PureComponent<ExampleProps, DateRangePicker3ExampleState> {
@@ -49,7 +52,10 @@ export class DateRangePicker3Example extends React.PureComponent<ExampleProps, D
         minDate: undefined,
         reverseMonthAndYearMenus: false,
         shortcuts: true,
+        showTimeArrowButtons: false,
         singleMonthOnly: false,
+        timePrecision: undefined,
+        useAmPm: false,
     };
 
     private handleDateRangeChange = (dateRange: DateRange) => this.setState({ dateRange });
@@ -60,10 +66,16 @@ 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 =>
+        this.setState({ showTimeArrowButtons }),
+    );
+
+    private toggleUseAmPm = handleBooleanChange(useAmPm => this.setState({ useAmPm }));
+
     private toggleReverseMonthAndYearMenus = handleBooleanChange(reverseMonthAndYearMenus =>
         this.setState({ reverseMonthAndYearMenus }),
     );
@@ -79,7 +91,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 +104,22 @@ 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 +146,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 +161,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>
             </>
         );