feat(DateInput): use standard date format

Author: tenphi

.changeset/smart-penguins-press.md

@@ -0,0 +1,5 @@
+---
+'@cube-dev/ui-kit': minor
+---
+
+Use standard date format for all date inputs.

src/components/forms/DatePicker/DateInput.stories.tsx

@@ -78,3 +78,6 @@ WithLimitedRange.args = {
   minValue: parseAbsoluteDate('2023-10-04'),
   maxValue: parseAbsoluteDate('2023-12-15'),
 };
+
+export const WithLocale = Template.bind({});
+WithLocale.args = { useLocale: true };

src/components/forms/DatePicker/DateInput.tsx

@@ -19,7 +19,7 @@ import { FieldBaseProps, ValidationState } from '../../../shared';
 import { mergeProps } from '../../../utils/react';
 import { useFieldProps, useFormProps } from '../Form';
 
-import { useFocusManagerRef } from './utils';
+import { formatSegments, useFocusManagerRef } from './utils';
 import { DateInputBase } from './DateInputBase';
 import { DatePickerSegment } from './DatePickerSegment';
 import { DEFAULT_DATE_PROPS } from './props';
@@ -35,6 +35,7 @@ export interface CubeDateInputProps<T extends DateValue = DateValue>
   styles?: Styles;
   size?: 'small' | 'medium' | 'large' | (string & {});
   validationState?: ValidationState;
+  useLocale?: boolean;
 }
 
 function DateInput<T extends DateValue>(
@@ -60,6 +61,7 @@ function DateInput<T extends DateValue>(
     isReadOnly,
     isRequired,
     size = 'medium',
+    useLocale: useLocaleProp,
   } = props;
 
   let styles = extractStyles(props, CONTAINER_STYLES, wrapperStyles);
@@ -72,6 +74,10 @@ function DateInput<T extends DateValue>(
     createCalendar,
   });
 
+  if (!useLocaleProp) {
+    state.segments = formatSegments(state.segments);
+  }
+
   let fieldRef = useRef(null);
   let { labelProps, fieldProps } = useDateField(props, state, fieldRef);
 

src/components/forms/DatePicker/DatePicker.stories.tsx

@@ -82,3 +82,6 @@ WithLimitedRange.args = {
   minValue: parseAbsoluteDate('2023-10-04'),
   maxValue: parseAbsoluteDate('2023-12-15'),
 };
+
+export const WithLocale = Template.bind({});
+WithLocale.args = { useLocale: true };

src/components/forms/DatePicker/DatePicker.tsx

@@ -41,6 +41,7 @@ export interface CubeDatePickerProps<T extends DateValue = DateValue>
   validationState?: ValidationState;
   maxVisibleMonths?: number;
   shouldFlip?: boolean;
+  useLocale?: boolean;
 }
 
 function DatePicker<T extends DateValue>(
@@ -56,7 +57,13 @@ function DatePicker<T extends DateValue>(
 
   let styles = extractStyles(props, CONTAINER_STYLES);
 
-  let { size, placeholderValue, isDisabled, validationState } = props;
+  let {
+    size,
+    placeholderValue,
+    isDisabled,
+    validationState,
+    useLocale: useLocaleProp,
+  } = props;
   let targetRef = useRef<HTMLDivElement>(null);
   let state = useDatePickerState({
     ...props,
@@ -101,7 +108,7 @@ function DatePicker<T extends DateValue>(
         validationState={validationState}
         size={size}
       >
-        <DatePickerInput {...fieldProps} />
+        <DatePickerInput useLocale={useLocaleProp} {...fieldProps} />
       </DateInputBase>
       <DialogTrigger
         hideArrow

src/components/forms/DatePicker/DatePickerInput.tsx

@@ -8,6 +8,7 @@ import { useLocale } from '@react-aria/i18n';
 import { tasty } from '../../../tasty';
 
 import { DatePickerSegment } from './DatePickerSegment';
+import { formatSegments } from './utils';
 
 const DateInputElement = tasty({
   role: 'presentation',
@@ -22,12 +23,13 @@ interface CubeDatePickerInputProps<T extends DateValue>
   extends SpectrumDatePickerProps<T> {
   hideValidationIcon?: boolean;
   maxGranularity?: SpectrumDatePickerProps<T>['granularity'];
+  useLocale?: boolean;
 }
 
 export function DatePickerInput<T extends DateValue>(
   props: CubeDatePickerInputProps<T>,
 ) {
-  let { isDisabled, isReadOnly, isRequired } = props;
+  let { isDisabled, isReadOnly, isRequired, useLocale: useLocaleProp } = props;
   let ref = useRef(null);
   let { locale } = useLocale();
   let state = useDateFieldState({
@@ -36,6 +38,10 @@ export function DatePickerInput<T extends DateValue>(
     createCalendar,
   });
 
+  if (!useLocaleProp) {
+    state.segments = formatSegments(state.segments);
+  }
+
   let { fieldProps } = useDateField(props, state, ref);
 
   return (

src/components/forms/DatePicker/DateRangePicker.stories.tsx

@@ -69,3 +69,6 @@ Disabled.args = { isDisabled: true };
 
 export const Small = Template.bind({});
 Small.args = { size: 'small' };
+
+export const WithLocale = Template.bind({});
+WithLocale.args = { useLocale: true };

src/components/forms/DatePicker/DateRangePicker.tsx

@@ -32,7 +32,7 @@ import { dateMessages } from './intl';
 const DateRangeDash = tasty({
   'aria-hidden': 'true',
   'data-qa': 'DateRangeDash',
-  children: '–',
+  children: '––',
   styles: {
     padding: '0 .5x',
   },
@@ -50,6 +50,7 @@ export interface CubeDateRangePickerProps<T extends DateValue = DateValue>
   validationState?: ValidationState;
   maxVisibleMonths?: number;
   shouldFlip?: boolean;
+  useLocale?: boolean;
 }
 
 function DateRangePicker<T extends DateValue>(
@@ -65,8 +66,14 @@ function DateRangePicker<T extends DateValue>(
 
   let styles = extractStyles(props, CONTAINER_STYLES);
 
-  let { size, shouldFlip, placeholderValue, isDisabled, validationState } =
-    props;
+  let {
+    size,
+    shouldFlip,
+    placeholderValue,
+    isDisabled,
+    validationState,
+    useLocale: useLocaleProp,
+  } = props;
   let targetRef = useRef<HTMLDivElement>(null);
   let state = useDateRangePickerState({
     ...props,
@@ -111,9 +118,9 @@ function DateRangePicker<T extends DateValue>(
         size={size}
         styles={{ radius: 'left', border: 'top left bottom' }}
       >
-        <DatePickerInput {...startFieldProps} />
+        <DatePickerInput useLocale={useLocaleProp} {...startFieldProps} />
         <DateRangeDash />
-        <DatePickerInput {...endFieldProps} />
+        <DatePickerInput useLocale={useLocaleProp} {...endFieldProps} />
       </DateInputBase>
       <DialogTrigger
         hideArrow

src/components/forms/DatePicker/utils.ts

@@ -6,6 +6,7 @@ import { useDateFormatter } from '@react-aria/i18n';
 import { useDisplayNames } from '@react-aria/datepicker';
 import { useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { useLayoutEffect } from '@react-aria/utils';
+import { DateSegment } from '@react-stately/datepicker';
 
 export function useFormatHelpText(
   props: Pick<SpectrumDatePickerBase, 'description' | 'showFormatHelpText'>,
@@ -73,3 +74,42 @@ export function useFocusManagerRef(ref: FocusableRef<HTMLElement>) {
   }));
   return domRef;
 }
+
+export function formatSegments(segments: DateSegment[]) {
+  segments = JSON.parse(JSON.stringify(segments));
+
+  segments.forEach((segment) => {
+    if (segment.type === 'literal') {
+      if (segment.text === '/') {
+        segment.text = '-';
+      }
+
+      if (segment.text === ', ') {
+        segment.text = ' ';
+      }
+    }
+  });
+
+  const year = segments.find((s) => s.type === 'year');
+
+  if (year) {
+    segments.splice(segments.indexOf(year), 1);
+    segments.unshift(year);
+  }
+
+  const month = segments.find((s) => s.type === 'month');
+
+  if (month) {
+    segments.splice(segments.indexOf(month), 1);
+    segments.splice(2, 0, month);
+  }
+
+  const day = segments.find((s) => s.type === 'day');
+
+  if (day) {
+    segments.splice(segments.indexOf(day), 1);
+    segments.splice(4, 0, day);
+  }
+
+  return segments;
+}