chore: optimize format value

src/RangePicker.tsx

@@ -651,11 +651,19 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
   // Close should sync back with text value
   const startStr =
     mergedValue && mergedValue[0]
-      ? generateConfig.locale.format(locale.locale, mergedValue[0], 'YYYYMMDDHHmmss')
+      ? formatValue(mergedValue[0], {
+          locale,
+          format: 'YYYYMMDDHHmmss',
+          generateConfig,
+        })
       : '';
   const endStr =
     mergedValue && mergedValue[1]
-      ? generateConfig.locale.format(locale.locale, mergedValue[1], 'YYYYMMDDHHmmss')
+      ? formatValue(mergedValue[1], {
+          locale,
+          format: 'YYYYMMDDHHmmss',
+          generateConfig,
+        })
       : '';
 
   useEffect(() => {

src/panels/DatePanel/DateBody.tsx

@@ -1,6 +1,12 @@
 import * as React from 'react';
 import { GenerateConfig } from '../../generate';
-import { WEEK_DAY_COUNT, getWeekStartDate, isSameDate, isSameMonth } from '../../utils/dateUtil';
+import {
+  WEEK_DAY_COUNT,
+  getWeekStartDate,
+  isSameDate,
+  isSameMonth,
+  formatValue,
+} from '../../utils/dateUtil';
 import { Locale } from '../../interface';
 import RangeContext from '../../RangeContext';
 import useCellClassName from '../../hooks/useCellClassName';
@@ -86,7 +92,13 @@ function DateBody<DateType>(props: DateBodyProps<DateType>) {
       getCellText={generateConfig.getDate}
       getCellClassName={getCellClassName}
       getCellDate={generateConfig.addDate}
-      titleCell={date => generateConfig.locale.format(locale.locale, date, 'YYYY-MM-DD')}
+      titleCell={date =>
+        formatValue(date, {
+          locale,
+          format: 'YYYY-MM-DD',
+          generateConfig,
+        })
+      }
       headerCells={headerCells}
     />
   );

src/panels/DatePanel/DateHeader.tsx

@@ -3,6 +3,7 @@ import Header from '../Header';
 import { Locale } from '../../interface';
 import { GenerateConfig } from '../../generate';
 import PanelContext from '../../PanelContext';
+import { formatValue } from '../../utils/dateUtil';
 
 export interface DateHeaderProps<DateType> {
   prefixCls: string;
@@ -57,7 +58,11 @@ function DateHeader<DateType>(props: DateHeaderProps<DateType>) {
       tabIndex={-1}
       className={`${prefixCls}-year-btn`}
     >
-      {generateConfig.locale.format(locale.locale, viewDate, locale.yearFormat)}
+      {formatValue(viewDate, {
+        locale,
+        format: locale.yearFormat,
+        generateConfig,
+      })}
     </button>
   );
   const monthNode: React.ReactNode = (
@@ -69,18 +74,16 @@ function DateHeader<DateType>(props: DateHeaderProps<DateType>) {
       className={`${prefixCls}-month-btn`}
     >
       {locale.monthFormat
-        ? generateConfig.locale.format(
-            locale.locale,
-            viewDate,
-            locale.monthFormat,
-          )
+        ? formatValue(viewDate, {
+            locale,
+            format: locale.monthFormat,
+            generateConfig,
+          })
         : monthsLocale[month]}
     </button>
   );
 
-  const monthYearNodes = locale.monthBeforeYear
-    ? [monthNode, yearNode]
-    : [yearNode, monthNode];
+  const monthYearNodes = locale.monthBeforeYear ? [monthNode, yearNode] : [yearNode, monthNode];
 
   return (
     <Header

src/panels/MonthPanel/MonthBody.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { GenerateConfig } from '../../generate';
 import { Locale } from '../../interface';
-import { isSameMonth } from '../../utils/dateUtil';
+import { formatValue, isSameMonth } from '../../utils/dateUtil';
 import RangeContext from '../../RangeContext';
 import useCellClassName from '../../hooks/useCellClassName';
 import PanelBody from '../PanelBody';
@@ -61,12 +61,22 @@ function MonthBody<DateType>(props: MonthBodyProps<DateType>) {
       getCellNode={getCellNode}
       getCellText={date =>
         locale.monthFormat
-          ? generateConfig.locale.format(locale.locale, date, locale.monthFormat)
+          ? formatValue(date, {
+              locale,
+              format: locale.monthFormat,
+              generateConfig,
+            })
           : monthsLocale[generateConfig.getMonth(date)]
       }
       getCellClassName={getCellClassName}
       getCellDate={generateConfig.addMonth}
-      titleCell={date => generateConfig.locale.format(locale.locale, date, 'YYYY-MM')}
+      titleCell={date =>
+        formatValue(date, {
+          locale,
+          format: 'YYYY-MM',
+          generateConfig,
+        })
+      }
     />
   );
 }

src/panels/MonthPanel/MonthHeader.tsx

@@ -3,6 +3,7 @@ import Header from '../Header';
 import { Locale } from '../../interface';
 import { GenerateConfig } from '../../generate';
 import PanelContext from '../../PanelContext';
+import { formatValue } from '../../utils/dateUtil';
 
 export interface MonthHeaderProps<DateType> {
   prefixCls: string;
@@ -40,7 +41,11 @@ function MonthHeader<DateType>(props: MonthHeaderProps<DateType>) {
       onSuperNext={onNextYear}
     >
       <button type="button" onClick={onYearClick} className={`${prefixCls}-year-btn`}>
-        {generateConfig.locale.format(locale.locale, viewDate, locale.yearFormat)}
+        {formatValue(viewDate, {
+          locale,
+          format: locale.yearFormat,
+          generateConfig,
+        })}
       </button>
     </Header>
   );

src/panels/QuarterPanel/QuarterBody.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { GenerateConfig } from '../../generate';
 import { Locale } from '../../interface';
-import { isSameQuarter } from '../../utils/dateUtil';
+import { formatValue, isSameQuarter } from '../../utils/dateUtil';
 import RangeContext from '../../RangeContext';
 import useCellClassName from '../../hooks/useCellClassName';
 import PanelBody from '../PanelBody';
@@ -46,11 +46,21 @@ function QuarterBody<DateType>(props: QuarterBodyProps<DateType>) {
       colNum={QUARTER_COL_COUNT}
       baseDate={baseQuarter}
       getCellText={date =>
-        generateConfig.locale.format(locale.locale, date, locale.quarterFormat || '[Q]Q')
+        formatValue(date, {
+          locale,
+          format: locale.quarterFormat || '[Q]Q',
+          generateConfig,
+        })
       }
       getCellClassName={getCellClassName}
       getCellDate={(date, offset) => generateConfig.addMonth(date, offset * 3)}
-      titleCell={date => generateConfig.locale.format(locale.locale, date, 'YYYY-[Q]Q')}
+      titleCell={date =>
+        formatValue(date, {
+          locale,
+          format: 'YYYY-[Q]Q',
+          generateConfig,
+        })
+      }
     />
   );
 }

src/panels/QuarterPanel/QuarterHeader.tsx

@@ -3,6 +3,7 @@ import Header from '../Header';
 import { Locale } from '../../interface';
 import { GenerateConfig } from '../../generate';
 import PanelContext from '../../PanelContext';
+import { formatValue } from '../../utils/dateUtil';
 
 export interface QuarterHeaderProps<DateType> {
   prefixCls: string;
@@ -39,7 +40,11 @@ function QuarterHeader<DateType>(props: QuarterHeaderProps<DateType>) {
       onSuperNext={onNextYear}
     >
       <button type="button" onClick={onYearClick} className={`${prefixCls}-year-btn`}>
-        {generateConfig.locale.format(locale.locale, viewDate, locale.yearFormat)}
+        {formatValue(viewDate, {
+          locale,
+          format: locale.yearFormat,
+          generateConfig,
+        })}
       </button>
     </Header>
   );

src/panels/TimePanel/TimeHeader.tsx

@@ -3,6 +3,7 @@ import Header from '../Header';
 import { Locale } from '../../interface';
 import { GenerateConfig } from '../../generate';
 import PanelContext from '../../PanelContext';
+import { formatValue } from '../../utils/dateUtil';
 
 export interface TimeHeaderProps<DateType> {
   prefixCls: string;
@@ -24,7 +25,11 @@ function TimeHeader<DateType>(props: TimeHeaderProps<DateType>) {
   return (
     <Header prefixCls={headerPrefixCls}>
       {value
-        ? generateConfig.locale.format(locale.locale, value, format)
+        ? formatValue(value, {
+            locale,
+            format,
+            generateConfig,
+          })
         : '\u00A0'}
     </Header>
   );

src/panels/YearPanel/YearBody.tsx

@@ -3,7 +3,7 @@ import { GenerateConfig } from '../../generate';
 import { YEAR_DECADE_COUNT } from '.';
 import { Locale, NullableDateType } from '../../interface';
 import useCellClassName from '../../hooks/useCellClassName';
-import { isSameYear } from '../../utils/dateUtil';
+import { formatValue, isSameYear } from '../../utils/dateUtil';
 import RangeContext from '../../RangeContext';
 import PanelBody from '../PanelBody';
 
@@ -60,7 +60,13 @@ function YearBody<DateType>(props: YearBodyProps<DateType>) {
       getCellText={generateConfig.getYear}
       getCellClassName={getCellClassName}
       getCellDate={generateConfig.addYear}
-      titleCell={date => generateConfig.locale.format(locale.locale, date, 'YYYY')}
+      titleCell={date =>
+        formatValue(date, {
+          locale,
+          format: 'YYYY',
+          generateConfig,
+        })
+      }
     />
   );
 }