feat(date-picker): locale use dateLocale

src/date-picker/src/panel/date.vue

@@ -15,7 +15,11 @@
           <backward-icon />
         </div>
         <div class="n-date-panel-month__month-year">
-          {{ calendarMonth }} {{ calendarYear }}
+          {{
+            locale.monthBeforeYear
+              ? `${calendarMonth} ${calendarYear}`
+              : `${calendarYear} ${calendarMonth}`
+          }}
         </div>
         <div class="n-date-panel-month__next" @click="nextMonth">
           <forward-icon />

src/date-picker/src/panel/daterange.vue

@@ -22,7 +22,11 @@
           <backward-icon />
         </div>
         <div class="n-date-panel-month__month-year">
-          {{ startCalendarMonth }} {{ startCalendarYear }}
+          {{
+            locale.monthBeforeYear
+              ? `${startCalendarMonth} ${startCalendarYear}`
+              : `${startCalendarYear} ${startCalendarMonth}`
+          }}
         </div>
         <div class="n-date-panel-month__next" @click="startCalendarNextMonth">
           <forward-icon />
@@ -80,7 +84,11 @@
           <backward-icon />
         </div>
         <div class="n-date-panel-month__month-year">
-          {{ endCalendarMonth }} {{ endCalendarYear }}
+          {{
+            locale.monthBeforeYear
+              ? `${endCalendarMonth} ${endCalendarYear}`
+              : `${endCalendarYear} ${endCalendarMonth}`
+          }}
         </div>
         <div class="n-date-panel-month__next" @click="endCalendarNextMonth">
           <forward-icon />

src/date-picker/src/panel/datetime.vue

@@ -44,7 +44,11 @@
           <backward-icon />
         </div>
         <div class="n-date-panel-month__month-year">
-          {{ calendarMonth }} {{ calendarYear }}
+          {{
+            locale.monthBeforeYear
+              ? `${calendarMonth} ${calendarYear}`
+              : `${calendarYear} ${calendarMonth}`
+          }}
         </div>
         <div class="n-date-panel-month__next" @click="nextMonth">
           <forward-icon />

src/date-picker/src/panel/datetimerange.vue

@@ -79,7 +79,11 @@
           <backward-icon />
         </div>
         <div class="n-date-panel-month__month-year">
-          {{ startCalendarMonth }} {{ startCalendarYear }}
+          {{
+            locale.monthBeforeYear
+              ? `${startCalendarMonth} ${startCalendarYear}`
+              : `${startCalendarYear} ${startCalendarMonth}`
+          }}
         </div>
         <div class="n-date-panel-month__next" @click="startCalendarNextMonth">
           <forward-icon />
@@ -137,7 +141,11 @@
           <backward-icon />
         </div>
         <div class="n-date-panel-month__month-year">
-          {{ endCalendarMonth }} {{ endCalendarYear }}
+          {{
+            locale.monthBeforeYear
+              ? `${endCalendarMonth} ${endCalendarYear}`
+              : `${endCalendarYear} ${endCalendarMonth}`
+          }}
         </div>
         <div class="n-date-panel-month__next" @click="endCalendarNextMonth">
           <forward-icon />

src/date-picker/src/panel/use-calendar.js

@@ -19,7 +19,6 @@ import { usePanelCommon } from './use-panel-common'
 function useCalendar (props, type) {
   const panelCommon = usePanelCommon(props)
   const NDatePicker = inject('NDatePicker')
-  const { locale } = NDatePicker
   const validation = {
     isDateDisabled: toRef(NDatePicker, 'isDateDisabled'),
     isTimeDisabled: toRef(NDatePicker, 'isTimeDisabled'),
@@ -41,11 +40,29 @@ function useCalendar (props, type) {
   const dateArrayRef = computed(() => {
     return dateArray(calendarDateTimeRef.value, props.value, nowRef.value)
   })
+  const weekdaysRef = computed(() => {
+    return dateArrayRef.value.slice(0, 7).map((dateItem) => {
+      const { ts } = dateItem
+      return format(
+        ts,
+        NDatePicker.locale.dayFormat,
+        panelCommon.dateFnsOptions.value
+      )
+    })
+  })
   const calendarMonthRef = computed(() => {
-    return locale[format(calendarDateTimeRef.value, 'MMM')]
+    return format(
+      calendarDateTimeRef.value,
+      NDatePicker.locale.monthFormat,
+      panelCommon.dateFnsOptions.value
+    )
   })
   const calendarYearRef = computed(() => {
-    return format(calendarDateTimeRef.value, 'yyyy')
+    return format(
+      calendarDateTimeRef.value,
+      NDatePicker.locale.yearFormat,
+      panelCommon.dateFnsOptions.value
+    )
   })
   watch(calendarDateTimeRef, (value, oldValue) => {
     if (!isSameMonth(value, oldValue)) {
@@ -63,7 +80,11 @@ function useCalendar (props, type) {
   })
   watch(toRef(props, 'value'), (value) => {
     if (value !== null) {
-      displayDateStringRef.value = format(value, props.dateFormat)
+      displayDateStringRef.value = format(
+        value,
+        props.dateFormat,
+        panelCommon.dateFnsOptions.value
+      )
       calendarDateTimeRef.value = value
     } else {
       displayDateStringRef.value = ''
@@ -148,7 +169,11 @@ function useCalendar (props, type) {
     if (time === undefined) {
       time = props.value
     }
-    displayDateStringRef.value = format(time, props.dateFormat)
+    displayDateStringRef.value = format(
+      time,
+      props.dateFormat,
+      panelCommon.dateFnsOptions.value
+    )
   }
   function handleConfirmClick () {
     if (validation.isDateInvalid.value || validation.isTimeInvalid.value) {
@@ -184,7 +209,7 @@ function useCalendar (props, type) {
     dateArray: dateArrayRef,
     calendarYear: calendarYearRef,
     calendarMonth: calendarMonthRef,
-    weekdays: panelCommon.weekdays,
+    weekdays: weekdaysRef,
     transitionDisabled: panelCommon.transitionDisabled,
     mergedIsDateDisabled,
     nextYear,

src/date-picker/src/panel/use-dual-calendar.js

@@ -18,7 +18,6 @@ import { usePanelCommon } from './use-panel-common'
 
 function useDualCalendar (props, type = 'datetime') {
   const NDatePicker = inject('NDatePicker')
-  const { locale } = NDatePicker
   const panelCommon = usePanelCommon(props)
   const validation = {
     isDateDisabled: toRef(NDatePicker, 'isDateDisabled'),
@@ -48,10 +47,14 @@ function useDualCalendar (props, type = 'datetime') {
   const { value, dateFormat } = props
 
   const startDateDisplayStringRef = ref(
-    value === null ? '' : format(value[0], dateFormat)
+    value === null
+      ? ''
+      : format(value[0], dateFormat, panelCommon.dateFnsOptions.value)
   )
   const endDateDisplayStringRef = ref(
-    value === null ? '' : format(value[1], dateFormat)
+    value === null
+      ? ''
+      : format(value[1], dateFormat, panelCommon.dateFnsOptions.value)
   )
   syncCalendarTimeWithValue(value)
 
@@ -66,17 +69,43 @@ function useDualCalendar (props, type = 'datetime') {
   const endDateArrayRef = computed(() => {
     return dateArray(endCalendarDateTimeRef.value, props.value, nowRef.value)
   })
+  const weekdaysRef = computed(() => {
+    return startDateArrayRef.value.slice(0, 7).map((dateItem) => {
+      const { ts } = dateItem
+      return format(
+        ts,
+        NDatePicker.locale.dayFormat,
+        panelCommon.dateFnsOptions.value
+      )
+    })
+  })
   const startCalendarMonthRef = computed(() => {
-    return locale[format(startCalendarDateTimeRef.value, 'MMM')]
+    return format(
+      startCalendarDateTimeRef.value,
+      NDatePicker.locale.monthFormat,
+      panelCommon.dateFnsOptions.value
+    )
   })
   const endCalendarMonthRef = computed(() => {
-    return locale[format(endCalendarDateTimeRef.value, 'MMM')]
+    return format(
+      endCalendarDateTimeRef.value,
+      NDatePicker.locale.monthFormat,
+      panelCommon.dateFnsOptions.value
+    )
   })
   const startCalendarYearRef = computed(() => {
-    return format(startCalendarDateTimeRef.value, 'yyyy')
+    return format(
+      startCalendarDateTimeRef.value,
+      NDatePicker.locale.yearFormat,
+      panelCommon.dateFnsOptions.value
+    )
   })
   const endCalendarYearRef = computed(() => {
-    return format(endCalendarDateTimeRef.value, 'yyyy')
+    return format(
+      endCalendarDateTimeRef.value,
+      NDatePicker.locale.yearFormat,
+      panelCommon.dateFnsOptions.value
+    )
   })
   const startTimeValueRef = computed(() => {
     const { value } = props
@@ -110,8 +139,16 @@ function useDualCalendar (props, type = 'datetime') {
     if (value !== null) {
       const [startMoment, endMoment] = value
       const { dateFormat } = props
-      startDateDisplayStringRef.value = format(startMoment, dateFormat)
-      endDateDisplayStringRef.value = format(endMoment, dateFormat)
+      startDateDisplayStringRef.value = format(
+        startMoment,
+        dateFormat,
+        panelCommon.dateFnsOptions.value
+      )
+      endDateDisplayStringRef.value = format(
+        endMoment,
+        dateFormat,
+        panelCommon.dateFnsOptions.value
+      )
       if (!isSelectingRef.value) {
         syncCalendarTimeWithValue(value)
       }
@@ -404,8 +441,16 @@ function useDualCalendar (props, type = 'datetime') {
     if (times === undefined) {
       times = value
     }
-    startDateDisplayStringRef.value = format(times[0], dateFormat)
-    endDateDisplayStringRef.value = format(times[1], dateFormat)
+    startDateDisplayStringRef.value = format(
+      times[0],
+      dateFormat,
+      panelCommon.dateFnsOptions.value
+    )
+    endDateDisplayStringRef.value = format(
+      times[1],
+      dateFormat,
+      panelCommon.dateFnsOptions.value
+    )
   }
   function handleStartTimePickerChange (value) {
     changeStartDateTime(value)
@@ -439,7 +484,7 @@ function useDualCalendar (props, type = 'datetime') {
     startCalendarYear: startCalendarYearRef,
     endCalendarMonth: endCalendarMonthRef,
     endCalendarYear: endCalendarYearRef,
-    weekdays: panelCommon.weekdays,
+    weekdays: weekdaysRef,
     startDateArray: startDateArrayRef,
     endDateArray: endDateArrayRef,
     transitionDisabled: panelCommon.transitionDisabled,

src/date-picker/src/panel/use-panel-common.js

@@ -8,13 +8,16 @@ import {
 } from '../../../_base/icons'
 import { NBaseFocusDetector } from '../../../_base'
 
-const daysKey = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
-
 const DATE_FORMAT = 'yyyy-MM-dd'
 const TIME_FORMAT = 'HH:mm:ss'
 
 function usePanelCommon (props) {
   const NDatePicker = inject('NDatePicker')
+  const dateFnsOptionsRef = computed(() => {
+    return {
+      locale: NDatePicker.dateLocale.locale
+    }
+  })
   const transitionDisabledRef = ref(false)
   const memorizedValueRef = ref(props.value)
   const selfRef = ref(null)
@@ -66,10 +69,8 @@ function usePanelCommon (props) {
     }
   }
   return {
+    dateFnsOptions: dateFnsOptionsRef,
     timePickerSize: computed(() => NDatePicker.timePickerSize),
-    weekdays: computed(() =>
-      daysKey.map((weekday) => NDatePicker.locale[weekday])
-    ),
     transitionDisabled: transitionDisabledRef,
     memorizedValue: memorizedValueRef,
     selfRef,

src/locales/common/enUS.js

@@ -11,26 +11,9 @@ export default {
       `Please load all ${label}'s descedants before checking it.`
   },
   DatePicker: {
-    Jan: 'Jan',
-    Feb: 'Feb',
-    Mar: 'Mar',
-    Apr: 'Apr',
-    May: 'May',
-    Jun: 'Jun',
-    Jul: 'Jul',
-    Aug: 'Aug',
-    Sep: 'Sep',
-    Oct: 'Oct',
-    Nov: 'Nov',
-    Dec: 'Dec',
-    Sun: 'Su',
-    Mon: 'Mo',
-    Tue: 'Tu',
-    Wed: 'We',
-    Thu: 'Th',
-    Fri: 'Fr',
-    Sat: 'Sa',
-    separator: 'to',
+    yearFormat: 'yyyy',
+    monthFormat: 'MMM',
+    dayFormat: 'eeeeee',
     clear: 'Clear',
     now: 'Now',
     confirm: 'Confirm',
@@ -41,7 +24,8 @@ export default {
     startDatePlaceholder: 'Start Date',
     endDatePlaceholder: 'End Date',
     startDatetimePlaceholder: 'Start Date and Time',
-    endDatetimePlaceholder: 'End Date and Time'
+    endDatetimePlaceholder: 'End Date and Time',
+    monthBeforeYear: true
   },
   DataTable: {
     confirm: 'Confirm',

src/locales/common/zhCN.js

@@ -10,26 +10,9 @@ export default {
     loadingRequiredMessage: (label) => `加载全部 ${label} 的子节点后才可选中`
   },
   DatePicker: {
-    Jan: '一月',
-    Feb: '二月',
-    Mar: '三月',
-    Apr: '四月',
-    May: '五月',
-    Jun: '六月',
-    Jul: '七月',
-    Aug: '八月',
-    Sep: '九月',
-    Oct: '十月',
-    Nov: '十一月',
-    Dec: '十二月',
-    Sun: '日',
-    Mon: '一',
-    Tue: '二',
-    Wed: '三',
-    Thu: '四',
-    Fri: '五',
-    Sat: '六',
-    separator: '至',
+    yearFormat: 'yyyy年',
+    monthFormat: 'MMM',
+    dayFormat: 'eeeeee',
     clear: '清除',
     now: '此刻',
     confirm: '确认',
@@ -40,7 +23,8 @@ export default {
     startDatePlaceholder: '开始日期',
     endDatePlaceholder: '结束日期',
     startDatetimePlaceholder: '开始日期时间',
-    endDatetimePlaceholder: '结束日期时间'
+    endDatetimePlaceholder: '结束日期时间',
+    monthBeforeYear: false
   },
   DataTable: {
     confirm: '确认',