fix(date-picker): panel doesn't use dateFormat in locale, closes #1793

CHANGELOG.en-US.md

@@ -8,6 +8,7 @@
 - Fix `n-skeleton` & `n-gradient-text` cause runtime error in some old browsers, closes [#1867](https://github.com/TuSimple/naive-ui/issues/1867).
 - Fix `n-data-table` `ellipsis` prop in column doesn't support all `n-ellipsis`'s props, closes [#1891](https://github.com/TuSimple/naive-ui/issues/1891).
 - Fix `n-form`'s `blankHeightXxx` theme var doesn't follow `common.heightXxx`, closes [#1880](https://github.com/TuSimple/naive-ui/issues/1880).
+- Fix `n-date-picker`'s panel doesn't use `dateFormat` in locale, closes [#1793](https://github.com/TuSimple/naive-ui/issues/1793).
 
 ### Feats
 

CHANGELOG.zh-CN.md

@@ -8,6 +8,7 @@
 - 修复 `n-skeleton` 和 `n-gradient-text` 在某些较老的浏览器导致运行错误，关闭 [#1867](https://github.com/TuSimple/naive-ui/issues/1867)
 - 修复 `n-data-table` 中列的 ellipsis 属性对于 `n-ellipsis` 的属性支持不全，关闭 [#1891](https://github.com/TuSimple/naive-ui/issues/1891)
 - 修复 `n-form` 的 `blankHeightXxx` 主题变量没有跟随 `common.heightXxx`，关闭 [#1880](https://github.com/TuSimple/naive-ui/issues/1880)
+- 修复 `n-date-picker` 面板中的日期输入未使用国际化的 `dateFormat`，关闭 [#1793](https://github.com/TuSimple/naive-ui/issues/1793)
 
 ### Feats
 

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

@@ -72,10 +72,13 @@ function useCalendar (
     isMinuteDisabled: isMinuteDisabledRef,
     isSecondDisabled: isSecondDisabledRef
   }
+  const mergedDateFormatRef = computed(
+    () => props.dateFormat || localeRef.value.dateFormat
+  )
   const dateInputValueRef = ref(
     props.value === null || Array.isArray(props.value)
       ? ''
-      : format(props.value, props.dateFormat)
+      : format(props.value, mergedDateFormatRef.value)
   )
   const calendarValueRef = ref(
     props.value === null || Array.isArray(props.value)
@@ -138,7 +141,7 @@ function useCalendar (
       if (value !== null && !Array.isArray(value)) {
         dateInputValueRef.value = format(
           value,
-          props.dateFormat,
+          mergedDateFormatRef.value,
           panelCommon.dateFnsOptions.value
         )
         calendarValueRef.value = value
@@ -164,7 +167,7 @@ function useCalendar (
   function handleDateInput (value: string): void {
     const date = strictParse(
       value,
-      props.dateFormat,
+      mergedDateFormatRef.value,
       new Date(),
       panelCommon.dateFnsOptions.value
     )
@@ -189,7 +192,7 @@ function useCalendar (
   function handleDateInputBlur (): void {
     const date = strictParse(
       dateInputValueRef.value,
-      props.dateFormat,
+      mergedDateFormatRef.value,
       new Date(),
       panelCommon.dateFnsOptions.value
     )
@@ -281,7 +284,7 @@ function useCalendar (
     }
     dateInputValueRef.value = format(
       time,
-      props.dateFormat,
+      mergedDateFormatRef.value,
       panelCommon.dateFnsOptions.value
     )
   }

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

@@ -78,16 +78,28 @@ function useDualCalendar (
   const isSelectingRef = ref(false)
   const memorizedStartDateTimeRef = ref<number>(0)
 
-  const { value, dateFormat } = props
+  const mergedDateFormatRef = computed(
+    () => props.dateFormat || localeRef.value.dateFormat
+  )
+
+  const { value } = props
 
   const startDateInput = ref(
     Array.isArray(value)
-      ? format(value[0], dateFormat, panelCommon.dateFnsOptions.value)
+      ? format(
+        value[0],
+        mergedDateFormatRef.value,
+        panelCommon.dateFnsOptions.value
+      )
       : ''
   )
   const endDateInputRef = ref(
     Array.isArray(value)
-      ? format(value[1], dateFormat, panelCommon.dateFnsOptions.value)
+      ? format(
+        value[1],
+        mergedDateFormatRef.value,
+        panelCommon.dateFnsOptions.value
+      )
       : ''
   )
 
@@ -173,15 +185,14 @@ function useDualCalendar (
     (value) => {
       if (value !== null && Array.isArray(value)) {
         const [startMoment, endMoment] = value
-        const { dateFormat } = props
         startDateInput.value = format(
           startMoment,
-          dateFormat,
+          mergedDateFormatRef.value,
           panelCommon.dateFnsOptions.value
         )
         endDateInputRef.value = format(
           endMoment,
-          dateFormat,
+          mergedDateFormatRef.value,
           panelCommon.dateFnsOptions.value
         )
         if (!isSelectingRef.value) {
@@ -413,7 +424,7 @@ function useDualCalendar (
   function handleStartDateInput (value: string): void {
     const date = strictParse(
       value,
-      props.dateFormat,
+      mergedDateFormatRef.value,
       new Date(),
       panelCommon.dateFnsOptions.value
     )
@@ -441,7 +452,7 @@ function useDualCalendar (
     /** strict check when input */
     const date = strictParse(
       value,
-      props.dateFormat,
+      mergedDateFormatRef.value,
       new Date(),
       panelCommon.dateFnsOptions.value
     )
@@ -468,7 +479,7 @@ function useDualCalendar (
   function handleStartDateInputBlur (): void {
     const date = strictParse(
       startDateInput.value,
-      props.dateFormat,
+      mergedDateFormatRef.value,
       new Date(),
       panelCommon.dateFnsOptions.value
     )
@@ -496,7 +507,7 @@ function useDualCalendar (
   function handleEndDateInputBlur (): void {
     const date = strictParse(
       endDateInputRef.value,
-      props.dateFormat,
+      mergedDateFormatRef.value,
       new Date(),
       panelCommon.dateFnsOptions.value
     )
@@ -530,18 +541,17 @@ function useDualCalendar (
       endDateInputRef.value = ''
       return
     }
-    const { dateFormat } = props
     if (times === undefined) {
       times = value
     }
     startDateInput.value = format(
       times[0],
-      dateFormat,
+      mergedDateFormatRef.value,
       panelCommon.dateFnsOptions.value
     )
     endDateInputRef.value = format(
       times[1],
-      dateFormat,
+      mergedDateFormatRef.value,
       panelCommon.dateFnsOptions.value
     )
   }

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

@@ -17,18 +17,14 @@ import {
   DefaultTime
 } from '../interface'
 
-const DATE_FORMAT = 'yyyy-MM-dd'
 const TIME_FORMAT = 'HH:mm:ss'
 
 const usePanelCommonProps = {
   active: Boolean,
-  dateFormat: {
-    type: String,
-    default: DATE_FORMAT
-  },
+  dateFormat: String,
   timeFormat: {
     type: String,
-    default: TIME_FORMAT
+    value: TIME_FORMAT
   },
   value: {
     type: [Array, Number] as PropType<Value | null>,