Tencent · uyarn · Jan 30, 2023 · Jan 30, 2023
diff --git a/js/date-picker/format.ts b/js/date-picker/format.ts
@@ -10,21 +10,22 @@ export const TIME_FORMAT = 'HH:mm:ss';
 export function parseToDayjs(
   value: string | Date | number,
   format: string,
-  timeOfDay?: string
+  timeOfDay?: string,
+  dayjsLocale?: string,
 ) {
   if (value === '') return dayjs();
 
   let dateText = value;
   // format week
   if (/[w|W]/g.test(format)) {
     if (typeof dateText !== 'string') {
-      dateText = dayjs(dateText).format(format) as string;
+      dateText = dayjs(dateText).locale(dayjsLocale || 'zh-cn').format(format) as string;
     }
 
     const yearStr = dateText.split(/[-/.\s]/)[0];
     const weekStr = dateText.split(/[-/.\s]/)[1];
     const weekFormatStr = format.split(/[-/.\s]/)[1];
-    const firstWeek = dayjs(yearStr, 'YYYY').startOf('year');
+    const firstWeek = dayjs(yearStr, 'YYYY').locale(dayjsLocale || 'zh-cn').startOf('year');
     for (let i = 0; i <= 52; i += 1) {
       let nextWeek = firstWeek.add(i, 'week');
       // 重置为周的第一天
@@ -38,7 +39,7 @@ export function parseToDayjs(
   // format quarter
   if (/Q/g.test(format)) {
     if (typeof dateText !== 'string') {
-      dateText = dayjs(dateText).format(format) as string;
+      dateText = dayjs(dateText).locale(dayjsLocale || 'zh-cn').format(format) as string;
     }
 
     const yearStr = dateText.split(/[-/.\s]/)[0];
@@ -71,17 +72,19 @@ export function parseToDayjs(
 function formatRange({
   newDate,
   format,
+  dayjsLocale,
   targetFormat,
   autoSwap,
 }: {
   newDate: any;
   format: string;
+  dayjsLocale?: string;
   targetFormat?: string;
   autoSwap?: boolean;
 }) {
   if (!newDate || !Array.isArray(newDate)) return [];
 
-  let dayjsDateList = newDate.map((d) => d && parseToDayjs(d, format));
+  let dayjsDateList = newDate.map((d) => d && parseToDayjs(d, format).locale(dayjsLocale));
 
   // 保证后面的时间大于前面的时间
   if (
@@ -116,14 +119,16 @@ function formatSingle({
   newDate,
   format,
   targetFormat,
+  dayjsLocale,
 }: {
   newDate: any;
   format: string;
   targetFormat?: string;
+  dayjsLocale?: string;
 }) {
   if (!newDate) return '';
 
-  const dayJsDate = parseToDayjs(newDate, format);
+  const dayJsDate = parseToDayjs(newDate, format).locale(dayjsLocale);
 
   // 格式化失败提示
   if (!dayJsDate.isValid()) {
@@ -161,15 +166,16 @@ export function formatDate(
   {
     format,
     targetFormat,
+    dayjsLocale = 'zh-cn',
     autoSwap,
-  }: { format: string; targetFormat?: string; autoSwap?: boolean }
+  }: { format: string; dayjsLocale?: string, targetFormat?: string; autoSwap?: boolean }
 ) {
   let result;
 
   if (Array.isArray(newDate)) {
-    result = formatRange({ newDate, format, targetFormat, autoSwap });
+    result = formatRange({ newDate, format, dayjsLocale, targetFormat, autoSwap });
   } else {
-    result = formatSingle({ newDate, format, targetFormat });
+    result = formatSingle({ newDate, format, dayjsLocale, targetFormat });
   }
 
   return result;

diff --git a/js/date-picker/utils.ts b/js/date-picker/utils.ts
@@ -1,18 +1,16 @@
 import dayjs from 'dayjs';
 import dayJsIsBetween from 'dayjs/plugin/isBetween';
+import weekOfYear from 'dayjs/plugin/weekOfYear';
 import weekYear from 'dayjs/plugin/weekYear';
 import localeData from 'dayjs/plugin/localeData';
-import weekOfYear from 'dayjs/plugin/weekOfYear';
 import quarterOfYear from 'dayjs/plugin/quarterOfYear';
-import isoWeek from 'dayjs/plugin/isoWeek';
 import advancedFormat from 'dayjs/plugin/advancedFormat';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
 import chunk from 'lodash/chunk';
 
-dayjs.extend(isoWeek);
+dayjs.extend(weekOfYear);
 dayjs.extend(weekYear);
 dayjs.extend(localeData);
-dayjs.extend(weekOfYear);
 dayjs.extend(quarterOfYear);
 dayjs.extend(advancedFormat);
 dayjs.extend(customParseFormat);
@@ -72,8 +70,8 @@ function isSameMonth(date1: Date, date2: Date): boolean {
   return isSameYear(date1, date2) && date1.getMonth() === date2.getMonth();
 }
 
-function isSameWeek(date1: Date, date2: Date): boolean {
-  return isSameMonth(date1, date2) && dayjs(date1).week() === dayjs(date2).week();
+function isSameWeek(date1: Date, date2: Date, dayjsLocale = 'zh-cn'): boolean {
+  return isSameMonth(date1, date2) && dayjs(date1).locale(dayjsLocale).week() === dayjs(date2).locale(dayjsLocale).week();
 }
 
 function isSameDate(date1: Date, date2: Date): boolean {
@@ -102,15 +100,15 @@ function compareAsc(date1: { getTime: () => any }, date2: Date): number {
  * @param {String} type 比较类型，默认比较到『日』 date|month|year
  * @returns {Boolean}
  */
-export function isSame(date1: Date, date2: Date, type = 'date'): boolean {
+export function isSame(date1: Date, date2: Date, type = 'date', dayjsLocale = 'zh-cn'): boolean {
   const func = {
     isSameYear,
     isSameQuarter,
     isSameMonth,
     isSameWeek,
     isSameDate,
   };
-  return func[`isSame${firstUpperCase(type)}`](date1, date2);
+  return func[`isSame${firstUpperCase(type)}`](date1, date2, dayjsLocale);
 }
 
 export function outOfRanges(d: Date, min: any, max: any) {
@@ -201,6 +199,7 @@ export interface OptionsType {
   minDate: Date;
   maxDate: Date;
   showWeekOfYear?: Boolean;
+  dayjsLocale?: string;
   monthLocal?: string[];
   quarterLocal?: string[];
 }
@@ -213,6 +212,7 @@ export function getWeeks(
     disableDate = () => false,
     minDate,
     maxDate,
+    dayjsLocale = 'zh-cn',
   }: OptionsType,
 ) {
   const prependDay = getFirstDayOfMonth({ year, month });
@@ -233,6 +233,7 @@ export function getWeeks(
       firstDayOfMonth: i === 1,
       lastDayOfMonth: i === maxDays,
       type: 'current-month',
+      dayjsObj: dayjs(currentDay).locale(dayjsLocale),
     });
   }
 
@@ -246,6 +247,7 @@ export function getWeeks(
         disabled: (typeof disableDate === 'function' && disableDate(prependDay)) || outOfRanges(prependDay, minDate, maxDate),
         additional: true, // 非当前月
         type: 'prev-month',
+        dayjsObj: dayjs(prependDay).locale(dayjsLocale),
       });
       prependDay.setDate(prependDay.getDate() - 1);
       if (prependDay.getDay() === Math.abs(firstDayOfWeek + 6) % 7) break;
@@ -262,6 +264,7 @@ export function getWeeks(
       disabled: (typeof disableDate === 'function' && disableDate(appendDay)) || outOfRanges(appendDay, minDate, maxDate),
       additional: true, // 非当前月
       type: 'next-month',
+      dayjsObj: dayjs(appendDay).locale(dayjsLocale),
     });
   }
 
@@ -273,7 +276,8 @@ export function getWeeks(
         ...d[0],
         active: false,
         value: d[0].value,
-        text: dayjs(d[0].value).week(),
+        text: dayjs(d[0].value).locale(dayjsLocale).week(),
+        dayjsObj: dayjs(d[0].value).locale(dayjsLocale),
       });
     });
   }
@@ -287,7 +291,8 @@ export function getQuarters(
     disableDate = () => false,
     minDate,
     maxDate,
-    quarterLocal
+    quarterLocal,
+    dayjsLocale = 'zh-cn',
   }: OptionsType,
 ) {
   const quarterArr = [];
@@ -302,6 +307,7 @@ export function getQuarters(
       disabled: (typeof disableDate === 'function' && disableDate(date)) || outOfRanges(date, minDate, maxDate),
       active: false,
       text: quarterLocal[i - 1],
+      dayjsObj: dayjs(date).locale(dayjsLocale),
     });
   }
 
@@ -314,6 +320,7 @@ export function getYears(
     disableDate = () => false,
     minDate,
     maxDate,
+    dayjsLocale = 'zh-cn',
   }: OptionsType,
 ) {
   const startYear = parseInt((year / 10).toString(), 10) * 10;
@@ -332,6 +339,7 @@ export function getYears(
       disabled: (typeof disableDate === 'function' && disableDate(date)) || outOfRanges(date, minDate, maxDate),
       active: false,
       text: `${date.getFullYear()}`,
+      dayjsObj: dayjs(date).locale(dayjsLocale),
     });
   }
 
@@ -340,7 +348,7 @@ export function getYears(
 
 export function getMonths(year: number, params: OptionsType) {
   const {
-    disableDate = () => false, minDate, maxDate, monthLocal,
+    disableDate = () => false, minDate, maxDate, monthLocal, dayjsLocale = 'zh-cn',
   } = params;
   const MonthArr = [];
   const today = getToday();
@@ -354,6 +362,7 @@ export function getMonths(year: number, params: OptionsType) {
       disabled: (typeof disableDate === 'function' && disableDate(date)) || outOfRanges(date, minDate, maxDate),
       active: false,
       text: monthLocal[date.getMonth()], // `${date.getMonth() + 1} ${monthText || '月'}`,
+      dayjsObj: dayjs(date).locale(dayjsLocale),
     });
   }
 

diff --git a/js/global-config/locale/ar_KW.ts b/js/global-config/locale/ar_KW.ts
@@ -1,5 +1,6 @@
 /* eslint-disable no-template-curly-in-string */
 // 文件有效，为国际化做准备
+import 'dayjs/locale/ar';
 export default {
   pagination: {
     itemsPerPage: "{size} / الصفحة",
@@ -31,6 +32,7 @@ export default {
     placeholder: "أدخل الكلمة للبحث",
   },
   timePicker: {
+    dayjsLocale: 'ar',
     now: "الآن",
     confirm: "نعم",
     anteMeridiem: "صباحا",
@@ -85,6 +87,7 @@ export default {
   },
 
   datePicker: {
+    dayjsLocale: 'ar',
     placeholder: {
       date: "حدد تاريخ",
       month: "اختر الشهر",

diff --git a/js/global-config/locale/en_US.ts b/js/global-config/locale/en_US.ts
@@ -1,5 +1,6 @@
 /* eslint-disable no-template-curly-in-string */
 // 文件有效，为国际化做准备
+import 'dayjs/locale/en';
 export default {
   pagination: {
     itemsPerPage: "{size} / page",
@@ -31,6 +32,7 @@ export default {
     placeholder: "enter keyworkd to search",
   },
   timePicker: {
+    dayjsLocale: 'en',
     now: "Now",
     confirm: "Confirm",
     anteMeridiem: "AM",
@@ -86,6 +88,7 @@ export default {
     placeholder: "please select",
   },
   datePicker: {
+    dayjsLocale: 'en',
     placeholder: {
       date: "select date",
       month: "select month",

diff --git a/js/global-config/locale/ja_JP.ts b/js/global-config/locale/ja_JP.ts
@@ -1,5 +1,6 @@
 /* eslint-disable no-template-curly-in-string */
 // 文件有效，为国际化做准备
+import 'dayjs/locale/ja';
 export default {
   pagination: {
     itemsPerPage: "{size} /ページ",
@@ -30,6 +31,7 @@ export default {
     placeholder: "検索するキーワードを入力してください",
   },
   timePicker: {
+    dayjsLocale: 'ja',
     now: "このとき",
     confirm: "決定事項",
     anteMeridiem: "モーニング",
@@ -84,6 +86,7 @@ export default {
     placeholder: "選択してください",
   },
   datePicker: {
+    dayjsLocale: 'ja',
     placeholder: {
       date: "日付を選択してください",
       month: "月を選択してください",

diff --git a/js/global-config/locale/ko_KR.ts b/js/global-config/locale/ko_KR.ts
@@ -1,5 +1,6 @@
 /* eslint-disable no-template-curly-in-string */
 // 文件有效，为国际化做准备
+import 'dayjs/locale/ko';
 export default {
   pagination: {
     itemsPerPage: "{size} /페이지",
@@ -30,6 +31,7 @@ export default {
     placeholder: "검색할 키워드를 입력하세요",
   },
   timePicker: {
+    dayjsLocale: 'ko',
     now: "지금",
     confirm: "확신하는",
     anteMeridiem: "아침",
@@ -84,6 +86,7 @@ export default {
     placeholder: "선택해주세요",
   },
   datePicker: {
+    dayjsLocale: 'ko',
     placeholder: {
       date: "날짜를 선택하세요Z",
       month: "월을 선택하세요",

diff --git a/js/global-config/locale/zh_CN.ts b/js/global-config/locale/zh_CN.ts
@@ -1,5 +1,6 @@
 /* eslint-disable no-template-curly-in-string */
 // 文件有效，为国际化做准备
+import 'dayjs/locale/zh-cn';
 export default {
   pagination: {
     itemsPerPage: "{size} 条/页",
@@ -30,6 +31,7 @@ export default {
     placeholder: "请输入关键词搜索",
   },
   timePicker: {
+    dayjsLocale: 'zh-cn',
     now: "此刻",
     confirm: "确定",
     anteMeridiem: "上午",
@@ -84,6 +86,7 @@ export default {
     placeholder: "请选择",
   },
   datePicker: {
+    dayjsLocale: 'zh-cn',
     placeholder: {
       date: "请选择日期",
       month: "请选择月份",

diff --git a/style/web/components/date-picker/_index.less b/style/web/components/date-picker/_index.less
@@ -291,7 +291,8 @@
   .@{prefix}-date-picker__cell--active {
     &::after {
       opacity: 1;
-      left: 0;
+      left: @datepicker-cell-month-year-left;
+      z-index: 5;
     }
   }
 

diff --git a/style/web/components/date-picker/_var.less b/style/web/components/date-picker/_var.less
@@ -35,7 +35,7 @@
 @datepicker-cell-min-width: @comp-size-xs;
 @datepicker-cell-height: @comp-size-xs;
 @datepicker-cell-min-width-l: @comp-size-xxl;
-@datepicker-cell-month-year-left: calc(0px - calc(@datepicker-cell-height + @comp-margin-xs));
+@datepicker-cell-month-year-left: calc(0px - calc(@datepicker-cell-height + @comp-margin-xxl));
 @datepicker-cell-inner-margin: calc(@comp-margin-xs - 1px);
 
 @datepicker-th-font-weight: 400;