fix(DatePicker): incorporate dayjsLocale in date formatting

packages/components/date-picker/DatePicker.tsx

@@ -11,11 +11,11 @@ import useConfig from '../hooks/useConfig';
 import useDefaultProps from '../hooks/useDefaultProps';
 import useLatest from '../hooks/useLatest';
 import useUpdateEffect from '../hooks/useUpdateEffect';
-import { useLocaleReceiver } from '../locale/LocalReceiver';
 import SelectInput from '../select-input';
 import { datePickerDefaultProps } from './defaultProps';
 import useSingle from './hooks/useSingle';
 import SinglePanel from './panel/SinglePanel';
+import { meridiemToHours } from './utils';
 
 import type { StyledProps } from '../common';
 import type { TagInputRemoveContext } from '../tag-input';
@@ -69,7 +69,6 @@ const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>((originalProps, r
     setCacheValue,
   } = useSingle(props);
 
-  const [local] = useLocaleReceiver('datePicker');
   const { format, timeFormat, valueType } = getDefaultFormat({
     mode,
     format: props.format,
@@ -114,17 +113,20 @@ const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>((originalProps, r
       value && !isDate(value) && !['week', 'quarter'].includes(props.mode)
         ? covertToDate(value as string, valueType)
         : value;
-    setCacheValue(formatDate(dateValue, { format }));
-    setInputValue(formatDate(dateValue, { format }));
+
+    const formattedDate = formatDate(dateValue, { format });
+    setCacheValue(formattedDate);
+    setInputValue(formattedDate);
 
     if (popupVisible) {
-      setYear(parseToDayjs(value as DateValue, format).year());
-      setMonth(parseToDayjs(value as DateValue, format).month());
+      const dayjsDate = parseToDayjs(dateValue as DateValue, format);
+      setYear(dayjsDate.year());
+      setMonth(dayjsDate.month());
       setTime(formatTime(value, format, timeFormat, defaultTime));
     } else {
       setIsHoverCell(false);
     }
-    // eslint-disable-next-line
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [popupVisible]);
 
   // 日期 hover
@@ -206,14 +208,12 @@ const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>((originalProps, r
 
     const { hours, minutes, seconds, milliseconds, meridiem } = extractTimeObj(val);
 
-    // am pm 12小时制转化 24小时制
-    let nextHours = hours;
-    if (/am/i.test(meridiem) && nextHours === 12) nextHours -= 12;
-    if (/pm/i.test(meridiem) && nextHours < 12) nextHours += 12;
+    const nextHours = meridiemToHours(meridiem, hours);
     const currentDate = !dayjs(inputValue, format).isValid() ? dayjs() : dayjs(inputValue, format);
     const nextDate = currentDate.hour(nextHours).minute(minutes).second(seconds).millisecond(milliseconds).toDate();
-    setInputValue(formatDate(nextDate, { format }));
-    setCacheValue(formatDate(nextDate, { format }));
+    const formattedDate = formatDate(nextDate, { format });
+    setInputValue(formattedDate);
+    setCacheValue(formattedDate);
 
     onPick?.(nextDate);
   }
@@ -273,11 +273,9 @@ const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>((originalProps, r
     let isSameDate: boolean;
     const currentValue = (value || []) as DateMultipleValue;
     if (mode !== 'week')
-      isSameDate = currentValue.some((val) =>
-        isSame(parseToDayjs(val, format).toDate(), date, mode, local.dayjsLocale),
-      );
+      isSameDate = currentValue.some((val) => isSame(parseToDayjs(val, format).toDate(), date, mode));
     else {
-      isSameDate = currentValue.some((val) => val === dayjs(date).locale(local.dayjsLocale).format(format));
+      isSameDate = currentValue.some((val) => val === dayjs(date).format(format));
     }
     let currentDate: DateMultipleValue;
 

packages/components/date-picker/DatePickerPanel.tsx

@@ -1,18 +1,22 @@
 import React, { forwardRef } from 'react';
 import dayjs from 'dayjs';
+
 import { formatDate, getDefaultFormat, parseToDayjs } from '@tdesign/common-js/date-picker/format';
-import { subtractMonth, addMonth, extractTimeObj } from '@tdesign/common-js/date-picker/utils';
-import { StyledProps } from '../common';
-import {
-  TdDatePickerPanelProps,
-  DateValue,
-  DatePickerYearChangeTrigger,
+import { addMonth, extractTimeObj, subtractMonth } from '@tdesign/common-js/date-picker/utils';
+
+import useDefaultProps from '../hooks/useDefaultProps';
+import useSingleValue from './hooks/useSingleValue';
+import SinglePanel from './panel/SinglePanel';
+import { meridiemToHours } from './utils';
+
+import type { StyledProps } from '../common';
+import type {
   DatePickerMonthChangeTrigger,
+  DatePickerYearChangeTrigger,
+  DateValue,
   PresetDate,
+  TdDatePickerPanelProps,
 } from './type';
-import SinglePanel from './panel/SinglePanel';
-import useSingleValue from './hooks/useSingleValue';
-import useDefaultProps from '../hooks/useDefaultProps';
 
 export interface DatePickerPanelProps extends TdDatePickerPanelProps, StyledProps {}
 
@@ -108,10 +112,7 @@ const DatePickerPanel = forwardRef<HTMLDivElement, DatePickerPanelProps>((origin
     setTime(val);
 
     const { hours, minutes, seconds, milliseconds, meridiem } = extractTimeObj(val);
-    // am pm 12小时制转化 24小时制
-    let nextHours = hours;
-    if (/am/i.test(meridiem) && nextHours === 12) nextHours -= 12;
-    if (/pm/i.test(meridiem) && nextHours < 12) nextHours += 12;
+    const nextHours = meridiemToHours(meridiem, hours);
     const currentDate = !dayjs(cacheValue, format).isValid() ? dayjs() : dayjs(cacheValue, format);
     const nextDate = currentDate.hour(nextHours).minute(minutes).second(seconds).millisecond(milliseconds).toDate();
     setCacheValue(formatDate(nextDate, { format }));

packages/components/date-picker/DateRangePicker.tsx

@@ -20,7 +20,7 @@ import { RangeInputPopup } from '../range-input';
 import { dateRangePickerDefaultProps } from './defaultProps';
 import useRange from './hooks/useRange';
 import RangePanel from './panel/RangePanel';
-import { dateCorrection } from './utils';
+import { dateCorrection, meridiemToHours } from './utils';
 
 import type { StyledProps } from '../common';
 import type { DateRangeValue, PresetDate, TdDateRangePickerProps } from './type';
@@ -227,11 +227,8 @@ const DateRangePicker = forwardRef<HTMLDivElement, DateRangePickerProps>((origin
     const currentDate = !dayjs(changedInputValue, format).isValid()
       ? dayjs().year(year[activeIndex]).month(month[activeIndex])
       : dayjs(changedInputValue, format);
-    // am pm 12小时制转化 24小时制
-    let nextHours = hours;
-    if (/am/i.test(meridiem) && nextHours === 12) nextHours -= 12;
-    if (/pm/i.test(meridiem) && nextHours < 12) nextHours += 12;
 
+    const nextHours = meridiemToHours(meridiem, hours);
     const nextDate = currentDate.hour(nextHours).minute(minutes).second(seconds).millisecond(milliseconds).toDate();
     nextInputValue[activeIndex] = nextDate;
 

packages/components/date-picker/DateRangePickerPanel.tsx

@@ -1,20 +1,23 @@
-import React, { forwardRef, useState, useMemo } from 'react';
+import React, { forwardRef, useMemo, useState } from 'react';
 import dayjs from 'dayjs';
+
 import { formatDate, getDefaultFormat, parseToDayjs } from '@tdesign/common-js/date-picker/format';
-import { subtractMonth, addMonth, extractTimeObj } from '@tdesign/common-js/date-picker/utils';
+import { addMonth, extractTimeObj, subtractMonth } from '@tdesign/common-js/date-picker/utils';
 import log from '@tdesign/common-js/log/index';
-import { StyledProps } from '../common';
+
+import useDefaultProps from '../hooks/useDefaultProps';
+import useRangeValue from './hooks/useRangeValue';
+import RangePanel from './panel/RangePanel';
+import { dateCorrection, meridiemToHours } from './utils';
+
+import type { StyledProps } from '../common';
 import {
-  TdDateRangePickerPanelProps,
-  DatePickerYearChangeTrigger,
   DatePickerMonthChangeTrigger,
   DatePickerTimeChangeTrigger,
+  DatePickerYearChangeTrigger,
   PresetDate,
+  TdDateRangePickerPanelProps,
 } from './type';
-import RangePanel from './panel/RangePanel';
-import useRangeValue from './hooks/useRangeValue';
-import useDefaultProps from '../hooks/useDefaultProps';
-import { dateCorrection } from './utils';
 
 export interface DateRangePickerPanelProps extends TdDateRangePickerPanelProps, StyledProps {}
 
@@ -173,11 +176,8 @@ const DateRangePickerPanel = forwardRef<HTMLDivElement, DateRangePickerPanelProp
     const currentDate = !dayjs(changedInputValue, format).isValid()
       ? dayjs().year(year[activeIndex]).month(month[activeIndex])
       : dayjs(changedInputValue, format);
-    // am pm 12小时制转化 24小时制
-    let nextHours = hours;
-    if (/am/i.test(meridiem) && nextHours === 12) nextHours -= 12;
-    if (/pm/i.test(meridiem) && nextHours < 12) nextHours += 12;
 
+    const nextHours = meridiemToHours(meridiem, hours);
     const nextDate = currentDate.hour(nextHours).minute(minutes).second(seconds).millisecond(milliseconds).toDate();
     nextInputValue[activeIndex] = nextDate;
 

packages/components/date-picker/DayjsProvider.tsx

@@ -0,0 +1,35 @@
+import dayjs from 'dayjs';
+import React, { useEffect } from 'react';
+import { useLocaleReceiver } from '../locale/LocalReceiver';
+
+export interface DayjsProviderProps {
+  children: React.ReactNode;
+}
+
+export default function DayjsProvider(props: DayjsProviderProps) {
+  const [locale] = useLocaleReceiver('datePicker');
+  const { dayjsLocale } = locale;
+
+  dayjs.locale(dayjsLocale);
+
+  useEffect(() => {
+    if (dayjsLocale !== dayjs.locale()) {
+      dayjs.locale(dayjsLocale);
+    }
+  }, [dayjsLocale]);
+
+  return <>{props.children}</>;
+}
+
+export function withDayjsProvider<T extends React.ComponentType<any>>(Component: T): T {
+  const WrappedComponent = React.forwardRef<React.ElementRef<T>, React.ComponentPropsWithoutRef<T>>((props, ref) => (
+    <DayjsProvider>
+      {/* @ts-ignore */}
+      <Component ref={ref} {...props} />
+    </DayjsProvider>
+  ));
+
+  WrappedComponent.displayName = Component.displayName;
+  // @ts-ignore
+  return WrappedComponent as T;
+}

packages/components/date-picker/_example/date-time.tsx

@@ -4,7 +4,7 @@ import type { DatePickerProps, DateValue } from 'tdesign-react';
 
 export default function YearDatePicker() {
   const [value, setValue] = useState<DateValue>('2022-02-02 12:11:11');
-  const [value2, setValue2] = useState<DateValue>('2022-02-02 am 12:11:11');
+  const [value2, setValue2] = useState<DateValue>('2022-02-02 凌晨 12:11:11');
 
   const handleChange: DatePickerProps['onChange'] = (value: DateValue) => {
     console.log(value);

packages/components/date-picker/base/Cell.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import classNames from 'classnames';
 import { extractTimeObj } from '@tdesign/common-js/date-picker/utils';
 import useConfig from '../../hooks/useConfig';
+import { meridiemToHours } from '../utils';
 
 export interface DatePickerCellProps {
   time?: string;
@@ -47,10 +48,7 @@ const DatePickerCell = (props: DatePickerCellProps) => {
     if (props.disabled) return;
     if (props.time) {
       const { hours, minutes, seconds, milliseconds, meridiem } = extractTimeObj(props.time);
-      // am pm 12小时制转化 24小时制
-      let nextHours = hours;
-      if (/am/i.test(meridiem) && nextHours === 12) nextHours -= 12;
-      if (/pm/i.test(meridiem) && nextHours < 12) nextHours += 12;
+      const nextHours = meridiemToHours(meridiem, hours);
       props.value.setHours(nextHours);
       props.value.setMinutes(minutes);
       props.value.setSeconds(seconds);
@@ -63,10 +61,7 @@ const DatePickerCell = (props: DatePickerCellProps) => {
     if (props.disabled) return;
     if (props.time) {
       const { hours, minutes, seconds, milliseconds, meridiem } = extractTimeObj(props.time);
-      // am pm 12小时制转化 24小时制
-      let nextHours = hours;
-      if (/am/i.test(meridiem) && nextHours === 12) nextHours -= 12;
-      if (/pm/i.test(meridiem) && nextHours < 12) nextHours += 12;
+      const nextHours = meridiemToHours(meridiem, hours);
       props.value.setHours(nextHours);
       props.value.setMinutes(minutes);
       props.value.setSeconds(seconds);

packages/components/date-picker/base/Table.tsx

@@ -1,17 +1,19 @@
 import React, { useMemo } from 'react';
+
 import classNames from 'classnames';
+
 import dayjs from 'dayjs';
 import isoWeek from 'dayjs/plugin/isoWeek';
-
 import type { Dayjs } from 'dayjs';
+
 import { parseToDayjs } from '@tdesign/common-js/date-picker/format';
-import { useLocaleReceiver } from '../../locale/LocalReceiver';
+
 import useConfig from '../../hooks/useConfig';
+import { useLocaleReceiver } from '../../locale/LocalReceiver';
 import DatePickerCell from './Cell';
 
-import { SinglePanelProps } from '../panel/SinglePanel';
-import { PanelContentProps } from '../panel/PanelContent';
-
+import type { PanelContentProps } from '../panel/PanelContent';
+import type { SinglePanelProps } from '../panel/SinglePanel';
 import type { DateMultipleValue, DateRangeValue, DateValue, TdDatePickerProps } from '../type';
 
 dayjs.extend(isoWeek);
@@ -51,14 +53,14 @@ const DatePickerTable = (props: DatePickerTableProps) => {
       if (!value.length) return {};
       const [startObj, endObj] = value.map((v) => v && parseToDayjs(v, format));
       const startYear = startObj?.year?.();
-      const startWeek = startObj?.locale?.(local.dayjsLocale)?.week?.();
+      const startWeek = startObj.week?.();
       const endYear = endObj?.year?.();
-      const endWeek = endObj?.locale?.(local.dayjsLocale)?.week?.();
+      const endWeek = endObj?.week?.();
 
       return { startYear, startWeek, endYear, endWeek };
     }
 
-    const valueObj = parseToDayjs(value, format).locale(local.dayjsLocale);
+    const valueObj = parseToDayjs(value, format);
     return { year: valueObj.year(), week: valueObj.week() };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [mode, value, format]);

packages/components/date-picker/hooks/useTableData.tsx

@@ -1,4 +1,4 @@
-import { getWeeks, getQuarters, getYears, getMonths, flagActive } from '@tdesign/common-js/date-picker/utils';
+import { flagActive, getMonths, getQuarters, getWeeks, getYears } from '@tdesign/common-js/date-picker/utils';
 import { useLocaleReceiver } from '../../locale/LocalReceiver';
 import type { SinglePanelProps } from '../panel/SinglePanel';
 
@@ -47,7 +47,6 @@ export default function useTableData(props: TableDataProps) {
     monthLocal,
     quarterLocal,
     showWeekOfYear: mode === 'week',
-    dayjsLocale: local.dayjsLocale,
     cancelRangeSelectLimit: props.cancelRangeSelectLimit,
   };
 

packages/components/date-picker/index.ts

@@ -1,19 +1,22 @@
+import { withDayjsProvider } from './DayjsProvider';
+
 import _DatePicker from './DatePicker';
-import _DateRangePicker from './DateRangePicker';
 import _DatePickerPanel from './DatePickerPanel';
+import _DateRangePicker from './DateRangePicker';
 import _DateRangePickerPanel from './DateRangePickerPanel';
 
 import './style/index.js';
 
 export type { DatePickerProps } from './DatePicker';
-export type { DateRangePickerProps } from './DateRangePicker';
 export type { DatePickerPanelProps } from './DatePickerPanel';
+export type { DateRangePickerProps } from './DateRangePicker';
 export type { DateRangePickerPanelProps } from './DateRangePickerPanel';
+
 export * from './type';
 
-export const DatePicker = _DatePicker;
-export const DateRangePicker = _DateRangePicker;
-export const DatePickerPanel = _DatePickerPanel;
-export const DateRangePickerPanel = _DateRangePickerPanel;
+export const DatePicker = withDayjsProvider(_DatePicker);
+export const DateRangePicker = withDayjsProvider(_DateRangePicker);
+export const DatePickerPanel = withDayjsProvider(_DatePickerPanel);
+export const DateRangePickerPanel = withDayjsProvider(_DateRangePickerPanel);
 
 export default DatePicker;

packages/components/date-picker/utils.ts

@@ -63,3 +63,13 @@ export function parseToDateTime(
 
   return dayjs.toDate();
 }
+
+/**
+ * AM/PM 12小时制转 24小时制
+ */
+export function meridiemToHours(meridiem: string, hours: number) {
+  let nextHours = hours;
+  if (/am/i.test(meridiem) && nextHours === 12) nextHours -= 12;
+  if (/pm/i.test(meridiem) && nextHours < 12) nextHours += 12;
+  return nextHours;
+}