diff --git a/src/Picker.tsx b/src/Picker.tsx
index d6d0e3e89..b2dd2e491 100644
--- a/src/Picker.tsx
+++ b/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);
diff --git a/src/RangePicker.tsx b/src/RangePicker.tsx
index fc4031c0c..9349c6de4 100644
--- a/src/RangePicker.tsx
+++ b/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, {
diff --git a/src/panels/DatePanel/DateBody.tsx b/src/panels/DatePanel/DateBody.tsx
index d0df6788b..f55e2de19 100644
--- a/src/panels/DatePanel/DateBody.tsx
+++ b/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}
     />
   );
diff --git a/src/panels/PanelBody.tsx b/src/panels/PanelBody.tsx
index fce93d478..f5d9c2e84 100644
--- a/src/panels/PanelBody.tsx
+++ b/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={() => {
diff --git a/src/utils/timeUtil.ts b/src/utils/timeUtil.ts
index 3b4051824..815ede9aa 100644
--- a/src/utils/timeUtil.ts
+++ b/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);
 }
diff --git a/src/utils/uiUtil.ts b/src/utils/uiUtil.ts
index 1ac765c7c..4229b993a 100644
--- a/src/utils/uiUtil.ts
+++ b/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;
     }
   }
 
diff --git a/tests/__snapshots__/panel.spec.tsx.snap b/tests/__snapshots__/panel.spec.tsx.snap
index 769478ed3..80f1fd2b2 100644
--- a/tests/__snapshots__/panel.spec.tsx.snap
+++ b/tests/__snapshots__/panel.spec.tsx.snap
@@ -178,7 +178,7 @@ exports[`Picker.Panel should render correctly in rtl 1`] = `
           <tr>
             <td
               class="rc-picker-cell"
-              title="1990-08-26"
+              title="8/26/1990"
             >
               <div
                 class="rc-picker-cell-inner"
@@ -188,7 +188,7 @@ exports[`Picker.Panel should render correctly in rtl 1`] = `
             </td>
             <td
               class="rc-picker-cell"
-              title="1990-08-27"
+              title="8/27/1990"
             >
               <div
                 class="rc-picker-cell-inner"
@@ -198,7 +198,7 @@ exports[`Picker.Panel should render correctly in rtl 1`] = `
             </td>
             <td
               class="rc-picker-cell"
-              title="1990-08-28"
+              title="8/28/1990"
             >
               <div
                 class="rc-picker-cell-inner"
@@ -208,7 +208,7 @@ exports[`Picker.Panel should render correctly in rtl 1`] = `
             </td>
             <td
               class="rc-picker-cell"
-              title="1990-08-29"
+              title="8/29/1990"
             >
               <div
                 class="rc-picker-cell-inner"
@@ -218,7 +218,7 @@ exports[`Picker.Panel should render correctly in rtl 1`] = `
             </td>
             <td
               class="rc-picker-cell"
-              title="1990-08-30"
+              title="8/30/1990"
             >
               <div
                 class="rc-picker-cell-inner"
@@ -228,7 +228,7 @@ exports[`Picker.Panel should render correctly in rtl 1`] = `
             </td>
             <td
               class="rc-picker-cell rc-picker-cell-end"
-              title="1990-08-31"
+              title="8/31/1990"
             >
               <div
                 class="rc-picker-cell-inner"
@@ -238,7 +238,7 @@ exports[`Picker.Panel should render correctly in rtl 1`] = `
             </td>
             <td
               class="rc-picker-cell rc-picker-cell-start rc-picker-cell-in-view"
-              title="1990-09-01"
+              title="9/1/1990"
             >
               <div
                 class="rc-picker-cell-inner"
@@ -250,7 +250,7 @@ exports[`Picker.Panel should render correctly in rtl 1`] = `
           <tr>
             <td
               class="rc-picker-cell rc-picker-cell-in-view"
-              title="1990-09-02"
+              title="9/2/1990"
             >
               <div
                 class="rc-picker-cell-inner"
@@ -260,7 +260,7 @@ exports[`Picker.Panel should render correctly in rtl 1`] = `
             </td>
             <td
               class="rc-picker-cell rc-picker-cell-in-view rc-picker-cell-today"
-              title="1990-09-03"
+              title="9/3/1990"
             >
               <div
                 class="rc-picker-cell-inner"
@@ -270,7 +270,7 @@ exports[`Picker.Panel should render correctly in rtl 1`] = `
             </td>
             <td
               class="rc-picker-cell rc-picker-cell-in-view"
-              title="1990-09-04"
+              title="9/4/1990"
             >
               <div
                 class="rc-picker-cell-inner"
@@ -280,7 +280,7 @@ exports[`Picker.Panel should render correctly in rtl 1`] = `
             </td>
             <td
               class="rc-picker-cell rc-picker-cell-in-view"
-              title="1990-09-05"
+              title="9/5/1990"
             >
               <div
                 class="rc-picker-cell-inner"
@@ -290,7 +290,7 @@ exports[`Picker.Panel should render correctly in rtl 1`] = `
             </td>
             <td
               class="rc-picker-cell rc-picker-cell-in-view"
-              title="1990-09-06"
+              title="9/6/1990"
             >
               <div
                 class="rc-picker-cell-inner"
@@ -300,7 +300,7 @@ exports[`Picker.Panel should render correctly in rtl 1`] = `
             </td>
             <td
               class="rc-picker-cell rc-picker-cell-in-view"
-              title="1990-09-07"
+              title="9/7/1990"
             >
               <div
                 class="rc-picker-cell-inner"
@@ -310,7 +310,7 @@ exports[`Picker.Panel should render correctly in rtl 1`] = `
             </td>
             <td
               class="rc-picker-cell rc-picker-cell-in-view"
-              title="1990-09-08"
+              title="9/8/1990"
             >
               <div
                 class="rc-picker-cell-inner"
@@ -322,7 +322,7 @@ exports[`Picker.Panel should render correctly in rtl 1`] = `
           <tr>
             <td
               class="rc-picker-cell rc-picker-cell-in-view"
-              title="1990-09-09"
+              title="9/9/1990"
             >
               <div
                 class="rc-picker-cell-inner"
@@ -332,7 +332,7 @@ exports[`Picker.Panel should render correctly in rtl 1`] = `
             </td>
             <td
               class="rc-picker-cell rc-picker-cell-in-view"
-              title="1990-09-10"
+              title="9/10/1990"
             >
               <div
                 class="rc-picker-cell-inner"
@@ -342,7 +342,7 @@ exports[`Picker.Panel should render correctly in rtl 1`] = `
             </td>
             <td
               class="rc-picker-cell rc-picker-cell-in-view"
-              title="1990-09-11"
+              title="9/11/1990"
             >
               <div
                 class="rc-picker-cell-inner"
@@ -352,7 +352,7 @@ exports[`Picker.Panel should render correctly in rtl 1`] = `
             </td>
             <td
               class="rc-picker-cell rc-picker-cell-in-view"
-              title="1990-09-12"
+              title="9/12/1990"
             >
               <div
                 class="rc-picker-cell-inner"
@@ -362,7 +362,7 @@ exports[`Picker.Panel should render correctly in rtl 1`] = `
             </td>
             <td
               class="rc-picker-cell rc-picker-cell-in-view"
-              title="1990-09-13"
+              title="9/13/1990"
             >
               <div
                 class="rc-picker-cell-inner"
@@ -372,7 +372,7 @@ exports[`Picker.Panel should render correctly in rtl 1`] = `
             </td>
             <td
               class="rc-picker-cell rc-picker-cell-in-view"
-              title="1990-09-14"
+              title="9/14/1990"
             >
               <div
                 class="rc-picker-cell-inner"
@@ -382,7 +382,7 @@ exports[`Picker.Panel should render correctly in rtl 1`] = `
             </td>
             <td
               class="rc-picker-cell rc-picker-cell-in-view"
-              title="1990-09-15"
+              title="9/15/1990"
             >
               <div
                 class="rc-picker-cell-inner"
@@ -394,7 +394,7 @@ exports[`Picker.Panel should render correctly in rtl 1`] = `
           <tr>
             <td
               class="rc-picker-cell rc-picker-cell-in-view"
-              title="1990-09-16"
+              title="9/16/1990"
             >
               <div
                 class="rc-picker-cell-inner"
@@ -404,7 +404,7 @@ exports[`Picker.Panel should render correctly in rtl 1`] = `
             </td>
             <td
               class="rc-picker-cell rc-picker-cell-in-view"
-              title="1990-09-17"
+              title="9/17/1990"
             >
               <div
                 class="rc-picker-cell-inner"
@@ -414,7 +414,7 @@ exports[`Picker.Panel should render correctly in rtl 1`] = `
             </td>
             <td
               class="rc-picker-cell rc-picker-cell-in-view"
-              title="1990-09-18"
+              title="9/18/1990"
             >
               <div
                 class="rc-picker-cell-inner"
@@ -424,7 +424,7 @@ exports[`Picker.Panel should render correctly in rtl 1`] = `
             </td>
             <td
               class="rc-picker-cell rc-picker-cell-in-view"
-              title="1990-09-19"
+              title="9/19/1990"
             >
               <div
                 class="rc-picker-cell-inner"
@@ -434,7 +434,7 @@ exports[`Picker.Panel should render correctly in rtl 1`] = `
             </td>
             <td
               class="rc-picker-cell rc-picker-cell-in-view"
-              title="1990-09-20"
+              title="9/20/1990"
             >
               <div
                 class="rc-picker-cell-inner"
@@ -444,7 +444,7 @@ exports[`Picker.Panel should render correctly in rtl 1`] = `
             </td>
             <td
               class="rc-picker-cell rc-picker-cell-in-view"
-              title="1990-09-21"
+              title="9/21/1990"
             >
               <div
                 class="rc-picker-cell-inner"
@@ -454,7 +454,7 @@ exports[`Picker.Panel should render correctly in rtl 1`] = `
             </td>
             <td
               class="rc-picker-cell rc-picker-cell-in-view"
-              title="1990-09-22"
+              title="9/22/1990"
             >
               <div
                 class="rc-picker-cell-inner"
@@ -466,7 +466,7 @@ exports[`Picker.Panel should render correctly in rtl 1`] = `
           <tr>
             <td
               class="rc-picker-cell rc-picker-cell-in-view"
-              title="1990-09-23"
+              title="9/23/1990"
             >
               <div
                 class="rc-picker-cell-inner"
@@ -476,7 +476,7 @@ exports[`Picker.Panel should render correctly in rtl 1`] = `
             </td>
             <td
               class="rc-picker-cell rc-picker-cell-in-view"
-              title="1990-09-24"
+              title="9/24/1990"
             >
               <div
                 class="rc-picker-cell-inner"
@@ -486,7 +486,7 @@ exports[`Picker.Panel should render correctly in rtl 1`] = `
             </td>
             <td
               class="rc-picker-cell rc-picker-cell-in-view"
-              title="1990-09-25"
+              title="9/25/1990"
             >
               <div
                 class="rc-picker-cell-inner"
@@ -496,7 +496,7 @@ exports[`Picker.Panel should render correctly in rtl 1`] = `
             </td>
             <td
               class="rc-picker-cell rc-picker-cell-in-view"
-              title="1990-09-26"
+              title="9/26/1990"
             >
               <div
                 class="rc-picker-cell-inner"
@@ -506,7 +506,7 @@ exports[`Picker.Panel should render correctly in rtl 1`] = `
             </td>
             <td
               class="rc-picker-cell rc-picker-cell-in-view"
-              title="1990-09-27"
+              title="9/27/1990"
             >
               <div
                 class="rc-picker-cell-inner"
@@ -516,7 +516,7 @@ exports[`Picker.Panel should render correctly in rtl 1`] = `
             </td>
             <td
               class="rc-picker-cell rc-picker-cell-in-view"
-              title="1990-09-28"
+              title="9/28/1990"
             >
               <div
                 class="rc-picker-cell-inner"
@@ -526,7 +526,7 @@ exports[`Picker.Panel should render correctly in rtl 1`] = `
             </td>
             <td
               class="rc-picker-cell rc-picker-cell-in-view"
-              title="1990-09-29"
+              title="9/29/1990"
             >
               <div
                 class="rc-picker-cell-inner"
@@ -538,7 +538,7 @@ exports[`Picker.Panel should render correctly in rtl 1`] = `
           <tr>
             <td
               class="rc-picker-cell rc-picker-cell-end rc-picker-cell-in-view"
-              title="1990-09-30"
+              title="9/30/1990"
             >
               <div
                 class="rc-picker-cell-inner"
@@ -548,7 +548,7 @@ exports[`Picker.Panel should render correctly in rtl 1`] = `
             </td>
             <td
               class="rc-picker-cell rc-picker-cell-start"
-              title="1990-10-01"
+              title="10/1/1990"
             >
               <div
                 class="rc-picker-cell-inner"
@@ -558,7 +558,7 @@ exports[`Picker.Panel should render correctly in rtl 1`] = `
             </td>
             <td
               class="rc-picker-cell"
-              title="1990-10-02"
+              title="10/2/1990"
             >
               <div
                 class="rc-picker-cell-inner"
@@ -568,7 +568,7 @@ exports[`Picker.Panel should render correctly in rtl 1`] = `
             </td>
             <td
               class="rc-picker-cell"
-              title="1990-10-03"
+              title="10/3/1990"
             >
               <div
                 class="rc-picker-cell-inner"
@@ -578,7 +578,7 @@ exports[`Picker.Panel should render correctly in rtl 1`] = `
             </td>
             <td
               class="rc-picker-cell"
-              title="1990-10-04"
+              title="10/4/1990"
             >
               <div
                 class="rc-picker-cell-inner"
@@ -588,7 +588,7 @@ exports[`Picker.Panel should render correctly in rtl 1`] = `
             </td>
             <td
               class="rc-picker-cell"
-              title="1990-10-05"
+              title="10/5/1990"
             >
               <div
                 class="rc-picker-cell-inner"
@@ -598,7 +598,7 @@ exports[`Picker.Panel should render correctly in rtl 1`] = `
             </td>
             <td
               class="rc-picker-cell"
-              title="1990-10-06"
+              title="10/6/1990"
             >
               <div
                 class="rc-picker-cell-inner"
diff --git a/tests/util.spec.tsx b/tests/util.spec.tsx
index 0348574ee..e70afb050 100644
--- a/tests/util.spec.tsx
+++ b/tests/util.spec.tsx
@@ -3,6 +3,8 @@ import { getLowerBoundTime, setTime, getLastDay } from '../src/utils/timeUtil';
 import { toArray } from '../src/utils/miscUtil';
 import { isSameTime, isSameDecade } from '../src/utils/dateUtil';
 import { getMoment } from './util/commonUtil';
+import koKR from '../src/locale/ko_KR';
+import enUS from '../src/locale/en_US';
 
 describe('Picker.Util', () => {
   it('toArray', () => {
@@ -66,11 +68,7 @@ describe('Picker.Util', () => {
   });
 
   describe('getLastDay', () => {
-    expect(
-      getLastDay(
-        momentGenerateConfig,
-        getMoment('2020-10-01'),
-      ),
-    ).toEqual('2020-10-31');
+    expect(getLastDay(momentGenerateConfig, getMoment('2020-10-01'), koKR)).toEqual('2020-10-31');
+    expect(getLastDay(momentGenerateConfig, getMoment('2020-10-01'), enUS)).toEqual('10/31/2020');
   });
 });