Add shouldForceLeadingZeros leading zeros prop to DatePicker (#4671)

Author: devongovett

packages/@react-aria/datepicker/src/useDatePicker.ts

@@ -124,6 +124,7 @@ export function useDatePicker<T extends DateValue>(props: AriaDatePickerProps<T>
       placeholderValue: props.placeholderValue,
       hideTimeZone: props.hideTimeZone,
       hourCycle: props.hourCycle,
+      shouldForceLeadingZeros: props.shouldForceLeadingZeros,
       granularity: props.granularity,
       isDisabled: props.isDisabled,
       isReadOnly: props.isReadOnly,

packages/@react-aria/datepicker/src/useDateRangePicker.ts

@@ -98,6 +98,7 @@ export function useDateRangePicker<T extends DateValue>(props: AriaDateRangePick
     hideTimeZone: props.hideTimeZone,
     hourCycle: props.hourCycle,
     granularity: props.granularity,
+    shouldForceLeadingZeros: props.shouldForceLeadingZeros,
     isDisabled: props.isDisabled,
     isReadOnly: props.isReadOnly,
     isRequired: props.isRequired,

packages/@react-spectrum/datepicker/stories/DateField.stories.tsx

@@ -109,6 +109,9 @@ export default {
     hideTimeZone: {
       control: 'boolean'
     },
+    shouldForceLeadingZeros: {
+      control: 'boolean'
+    },
     isDisabled: {
       control: 'boolean'
     },

packages/@react-spectrum/datepicker/stories/DatePicker.stories.tsx

@@ -121,6 +121,9 @@ export default {
     hideTimeZone: {
       control: 'boolean'
     },
+    shouldForceLeadingZeros: {
+      control: 'boolean'
+    },
     isDisabled: {
       control: 'boolean'
     },

packages/@react-spectrum/datepicker/stories/DateRangePicker.stories.tsx

@@ -78,6 +78,12 @@ HourCycle24.story = {
   name: 'hourCycle: 24'
 };
 
+export const ForceLeadingZeros = () => render({defaultValue: {start: new CalendarDate(2020, 2, 3), end: new CalendarDate(2020, 5, 4)}, shouldForceLeadingZeros: true});
+
+ForceLeadingZeros.story = {
+  name: 'shouldForceLeadingZeros'
+};
+
 export const IsDisabled = () => render({isDisabled: true, value: {start: new CalendarDate(2020, 2, 3), end: new CalendarDate(2020, 5, 4)}});
 
 IsDisabled.story = {

packages/@react-spectrum/datepicker/stories/TimeField.stories.tsx

@@ -83,6 +83,12 @@ HideTimeZone.story = {
   name: 'hideTimeZone'
 };
 
+export const ForceLeadingZeros = () => render({defaultValue: parseTime('08:00'), shouldForceLeadingZeros: true});
+
+ForceLeadingZeros.story = {
+  name: 'shouldForceLeadingZeros'
+};
+
 export const IsDisabled = () => render({isDisabled: true, value: new Time(2, 35)});
 
 IsDisabled.story = {

packages/@react-spectrum/datepicker/test/DatePickerBase.test.js

@@ -215,6 +215,23 @@ describe('DatePickerBase', function () {
       let button = getAllByRole('button')[0];
       expect(button).toHaveAttribute('disabled');
     });
+
+    it.each`
+      Name                   | Component          | props
+      ${'DatePicker'}        | ${DatePicker}      | ${{defaultValue: new CalendarDate(2019, 7, 5)}}
+      ${'DateRangePicker'}   | ${DateRangePicker} | ${{defaultValue: {start: new CalendarDate(2019, 7, 5), end: new CalendarDate(2019, 7, 8)}}}
+    `('$Name should support shouldForceLeadingZeros', ({Component, props}) => {
+      let {getAllByRole} = render(<Component label="Date" {...props} shouldForceLeadingZeros />);
+
+      let segments = getAllByRole('spinbutton');
+      for (let segment of segments) {
+        if (segment.getAttribute('data-testid') !== 'year') {
+          // ignore placeholder text.
+          let textContent = [...segment.childNodes].map(el => el.nodeType === 3 ? el.textContent : '').join('');
+          expect(textContent.startsWith('0')).toBeTruthy();
+        }
+      }
+    });
   });
 
   describe('calendar popover', function () {

packages/@react-stately/datepicker/src/useDateFieldState.ts

@@ -183,8 +183,9 @@ export function useDateFieldState<T extends DateValue = DateValue>(props: DateFi
     timeZone: defaultTimeZone,
     hideTimeZone,
     hourCycle: props.hourCycle,
-    showEra
-  }), [props.maxGranularity, granularity, props.hourCycle, defaultTimeZone, hideTimeZone, showEra]);
+    showEra,
+    shouldForceLeadingZeros: props.shouldForceLeadingZeros
+  }), [props.maxGranularity, granularity, props.hourCycle, props.shouldForceLeadingZeros, defaultTimeZone, hideTimeZone, showEra]);
   let opts = useMemo(() => getFormatOptions({}, formatOpts), [formatOpts]);
 
   let dateFormatter = useMemo(() => new DateFormatter(locale, opts), [locale, opts]);

packages/@react-stately/datepicker/src/utils.ts

@@ -28,7 +28,8 @@ interface FormatterOptions {
   granularity?: DatePickerProps<any>['granularity'],
   maxGranularity?: 'year' | 'month' | DatePickerProps<any>['granularity'],
   hourCycle?: 12 | 24,
-  showEra?: boolean
+  showEra?: boolean,
+  shouldForceLeadingZeros?: boolean
 }
 
 const DEFAULT_FIELD_OPTIONS: FieldOptions = {
@@ -40,11 +41,21 @@ const DEFAULT_FIELD_OPTIONS: FieldOptions = {
   second: '2-digit'
 };
 
+const TWO_DIGIT_FIELD_OPTIONS: FieldOptions = {
+  year: 'numeric',
+  month: '2-digit',
+  day: '2-digit',
+  hour: '2-digit',
+  minute: '2-digit',
+  second: '2-digit'
+};
+
 export function getFormatOptions(
   fieldOptions: FieldOptions,
   options: FormatterOptions
 ): Intl.DateTimeFormatOptions {
-  fieldOptions = {...DEFAULT_FIELD_OPTIONS, ...fieldOptions};
+  let defaultFieldOptions = options.shouldForceLeadingZeros ? TWO_DIGIT_FIELD_OPTIONS : DEFAULT_FIELD_OPTIONS;
+  fieldOptions = {...defaultFieldOptions, ...fieldOptions};
   let granularity = options.granularity || 'minute';
   let keys = Object.keys(fieldOptions);
   let startIdx = keys.indexOf(options.maxGranularity ?? 'year');

packages/@react-types/datepicker/src/index.d.ts

@@ -52,7 +52,12 @@ interface DateFieldBase<T extends DateValue> extends InputBase, Validation, Focu
    * Whether to hide the time zone abbreviation.
    * @default false
    */
-  hideTimeZone?: boolean
+  hideTimeZone?: boolean,
+  /**
+   * Whether to always show leading zeros in the month, day, and hour fields.
+   * By default, this is determined by the user's locale.
+   */
+  shouldForceLeadingZeros?: boolean
 }
 
 interface AriaDateFieldBaseProps<T extends DateValue> extends DateFieldBase<T>, AriaLabelingProps, DOMProps {}
@@ -129,6 +134,11 @@ export interface TimePickerProps<T extends TimeValue> extends InputBase, Validat
   granularity?: 'hour' | 'minute' | 'second',
   /** Whether to hide the time zone abbreviation. */
   hideTimeZone?: boolean,
+  /**
+   * Whether to always show leading zeros in the hour field.
+   * By default, this is determined by the user's locale.
+   */
+  shouldForceLeadingZeros?: boolean,
   /**
    * A placeholder time that influences the format of the placeholder shown when no value is selected.
    * Defaults to 12:00 AM or 00:00 depending on the hour cycle.