always show both timepickers; add stacked styling

palantir · Oct 6, 2023 · 7af61d2 · 7af61d2
1 parent 47d43c0
commit 7af61d2
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 21 deletions.
diff --git 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
@@ -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
@@ -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) => {