Format titleCell with locale

src/Picker.tsx

@@ -181,7 +181,7 @@ function InnerPicker<DateType>(props: PickerProps<DateType>) {
   const needConfirmButton: boolean = (picker === 'date' && !!showTime) || picker === 'time';
 
   // ============================= State =============================
-  const formatList = toArray(getDefaultFormat(format, picker, showTime, use12Hours));
+  const formatList = toArray(getDefaultFormat(format, picker, showTime, use12Hours, locale));
 
   // Panel ref
   const panelDivRef = React.useRef<HTMLDivElement>(null);

src/RangePicker.tsx

@@ -234,7 +234,9 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
   const endInputRef = useRef<HTMLInputElement>(null);
 
   // ============================= Misc ==============================
-  const formatList = toArray(getDefaultFormat<DateType>(format, picker, showTime, use12Hours));
+  const formatList = toArray(
+    getDefaultFormat<DateType>(format, picker, showTime, use12Hours, locale),
+  );
 
   // Active picker
   const [mergedActivePickerIndex, setMergedActivePickerIndex] = useMergedState<0 | 1>(0, {

src/panels/DatePanel/DateBody.tsx

@@ -1,12 +1,6 @@
 import * as React from 'react';
 import type { GenerateConfig } from '../../generate';
-import {
-  WEEK_DAY_COUNT,
-  getWeekStartDate,
-  isSameDate,
-  isSameMonth,
-  formatValue,
-} from '../../utils/dateUtil';
+import { WEEK_DAY_COUNT, getWeekStartDate, isSameDate, isSameMonth } from '../../utils/dateUtil';
 import type { Locale } from '../../interface';
 import RangeContext from '../../RangeContext';
 import useCellClassName from '../../hooks/useCellClassName';
@@ -34,16 +28,8 @@ export type DateBodyProps<DateType> = {
 } & DateBodyPassProps<DateType>;
 
 function DateBody<DateType>(props: DateBodyProps<DateType>) {
-  const {
-    prefixCls,
-    generateConfig,
-    prefixColumn,
-    locale,
-    rowCount,
-    viewDate,
-    value,
-    dateRender,
-  } = props;
+  const { prefixCls, generateConfig, prefixColumn, locale, rowCount, viewDate, value, dateRender } =
+    props;
 
   const { rangedValue, hoverRangedValue } = React.useContext(RangeContext);
 
@@ -76,7 +62,7 @@ function DateBody<DateType>(props: DateBodyProps<DateType>) {
     rangedValue: prefixColumn ? null : rangedValue,
     hoverRangedValue: prefixColumn ? null : hoverRangedValue,
     isSameCell: (current, target) => isSameDate(generateConfig, current, target),
-    isInView: date => isSameMonth(generateConfig, date, viewDate),
+    isInView: (date) => isSameMonth(generateConfig, date, viewDate),
     offsetCell: (date, offset) => generateConfig.addDate(date, offset),
   });
 
@@ -92,13 +78,7 @@ function DateBody<DateType>(props: DateBodyProps<DateType>) {
       getCellText={generateConfig.getDate}
       getCellClassName={getCellClassName}
       getCellDate={generateConfig.addDate}
-      titleCell={date =>
-        formatValue(date, {
-          locale,
-          format: 'YYYY-MM-DD',
-          generateConfig,
-        })
-      }
+      titleCell={(date) => generateConfig.locale.format(locale.locale, date, locale.dateFormat)}
       headerCells={headerCells}
     />
   );

src/panels/PanelBody.tsx

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import PanelContext from '../PanelContext';
 import type { GenerateConfig } from '../generate';
 import { getLastDay } from '../utils/timeUtil';
-import type { PanelMode } from '../interface';
+import type { PanelMode, Locale } from '../interface';
 import { getCellDateDisabled } from '../utils/dateUtil';
 
 export type PanelBodyProps<DateType> = {
@@ -23,6 +23,7 @@ export type PanelBodyProps<DateType> = {
   getCellNode?: (date: DateType) => React.ReactNode;
   titleCell?: (date: DateType) => string;
   generateConfig: GenerateConfig<DateType>;
+  locale?: Locale;
 
   // Used for week panel
   prefixColumn?: (date: DateType) => React.ReactNode;
@@ -44,6 +45,7 @@ export default function PanelBody<DateType>({
   getCellNode,
   getCellDate,
   generateConfig,
+  locale,
   titleCell,
   headerCells,
 }: PanelBodyProps<DateType>) {
@@ -77,6 +79,10 @@ export default function PanelBody<DateType>({
       }
 
       const title = titleCell && titleCell(currentDate);
+      const lastDateTitle =
+        picker === 'year'
+          ? Number(title) % 10 === 9
+          : locale && getLastDay(generateConfig, currentDate, locale);
 
       row.push(
         <td
@@ -86,9 +92,7 @@ export default function PanelBody<DateType>({
             [`${cellPrefixCls}-disabled`]: disabled,
             [`${cellPrefixCls}-start`]:
               getCellText(currentDate) === 1 || (picker === 'year' && Number(title) % 10 === 0),
-            [`${cellPrefixCls}-end`]:
-              title === getLastDay(generateConfig, currentDate) ||
-              (picker === 'year' && Number(title) % 10 === 9),
+            [`${cellPrefixCls}-end`]: title === lastDateTitle,
             ...getCellClassName(currentDate),
           })}
           onClick={() => {

src/utils/timeUtil.ts

@@ -1,5 +1,6 @@
 import type { NullableDateType } from '../interface';
 import type { GenerateConfig } from '../generate';
+import type { Locale } from '../interface';
 
 export function setTime<DateType>(
   generateConfig: GenerateConfig<DateType>,
@@ -24,22 +25,12 @@ export function setDateTime<DateType>(
   }
 
   let newDate = date;
-  newDate = generateConfig.setHour(
-    newDate,
-    generateConfig.getHour(defaultDate),
-  );
-  newDate = generateConfig.setMinute(
-    newDate,
-    generateConfig.getMinute(defaultDate),
-  );
-  newDate = generateConfig.setSecond(
-    newDate,
-    generateConfig.getSecond(defaultDate),
-  );
+  newDate = generateConfig.setHour(newDate, generateConfig.getHour(defaultDate));
+  newDate = generateConfig.setMinute(newDate, generateConfig.getMinute(defaultDate));
+  newDate = generateConfig.setSecond(newDate, generateConfig.getSecond(defaultDate));
   return newDate;
 }
 
-
 export function getLowerBoundTime(
   hour: number,
   minute: number,
@@ -60,11 +51,14 @@ export function getLowerBoundTime(
   return [lowerBoundHour, lowerBoundMinute, lowerBoundSecond];
 }
 
-export function getLastDay<DateType>(generateConfig: GenerateConfig<DateType>, date: DateType) {
+export function getLastDay<DateType>(
+  generateConfig: GenerateConfig<DateType>,
+  date: DateType,
+  locale: Locale,
+) {
   const year = generateConfig.getYear(date);
   const month = generateConfig.getMonth(date) + 1;
   const endDate = generateConfig.getEndDate(generateConfig.getFixedDate(`${year}-${month}-01`));
-  const lastDay = generateConfig.getDate(endDate);
-  const monthShow = month < 10 ? `0${month}` : `${month}`;
-  return `${year}-${monthShow}-${lastDay}`;
+
+  return generateConfig.locale.format(locale.locale, endDate, locale.dateFormat);
 }

src/utils/uiUtil.ts

@@ -2,7 +2,7 @@ import KeyCode from 'rc-util/lib/KeyCode';
 import raf from 'rc-util/lib/raf';
 import isVisible from 'rc-util/lib/Dom/isVisible';
 import type { GenerateConfig } from '../generate';
-import type { CustomFormat, PanelMode, PickerMode } from '../interface';
+import type { CustomFormat, PanelMode, PickerMode, Locale } from '../interface';
 
 const scrollIds = new Map<HTMLElement, number>();
 
@@ -149,6 +149,7 @@ export function getDefaultFormat<DateType>(
   picker: PickerMode | undefined,
   showTime: boolean | object | undefined,
   use12Hours: boolean | undefined,
+  locale: Locale,
 ) {
   let mergedFormat = format;
   if (!mergedFormat) {
@@ -170,11 +171,11 @@ export function getDefaultFormat<DateType>(
         break;
 
       case 'year':
-        mergedFormat = 'YYYY';
+        mergedFormat = locale.yearFormat;
         break;
 
       default:
-        mergedFormat = showTime ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD';
+        mergedFormat = showTime ? locale.dateTimeFormat : locale.dateFormat;
     }
   }