feat(date-picker): add update-value-on-close prop (#231)

* feat(date-picker): add update-value-on-close prop (#156)

* feat(date-picker): add update-value-on-close prop

* feat(date-picker): lint style

* feat(date-picker): optimazate demo & docs

* feat(date-picker): optimaze docs

* feat(date-picker): lint date-picker code

* feat(date-picker): update prop desc

Co-authored-by: 07akioni <07akioni2@gmail.com>

* feat(date-picker): disable update-value-on-close when handle button click

* feat(date-picker): OnClose type

Co-authored-by: 07akioni <07akioni2@gmail.com>

CHANGELOG.en-US.md

@@ -11,6 +11,7 @@
 
 - Add `n-carousel` component.
 - Add `useThemeVars` composable to provide theme variables.
+- `n-date-picker` add `update-value-on-close` prop.
 
 ### Fixes
 

CHANGELOG.zh-CN.md

@@ -11,6 +11,7 @@
 
 - 新增 `n-carousel` 组件
 - 新增 `useThemeVars` 函数提供主题变量
+- `n-date-picker` 新增 `update-value-on-close` 属性
 
 ### Fixes
 

src/date-picker/demos/enUS/index.demo-entry.md

@@ -17,6 +17,7 @@ events
 format
 ranges
 footerslot
+update-on-close
 ```
 
 ## Props
@@ -53,6 +54,7 @@ footerslot
 | is-date-disabled | `(current: number) => boolean` | `() => false` | Validator of the date. |
 | is-time-disabled | `(current: number) => { isHourDisabled?: () => boolean, isMinuteDisabled?: () => boolean, isSecondDisabled?: () => boolean }` | `undefined` | Validator of the time. |
 | placeholder | `string` | `'Select Date and Time'` | Prompt information. |
+| update-value-on-close | `boolean` | `false` | Whether to update value on close. |
 | on-update:value | `(value: number \| null) => void` | `undefined` | Callback when date is selected. |
 
 ### DateRange Type Props
@@ -67,6 +69,7 @@ footerslot
 | ranges | `Record<string, [number, number]>` | `undefined` | Customize ranges. |
 | separator | `string` | `'to'` | The separator between the start input and the end input. |
 | start-placeholder | `string` | `'Start Date'` | The prompt information of the start input. |
+| update-value-on-close | `boolean` | `false` | Whether to update value on close.  |
 | on-update:value | `(value: [number, number] \| null) => void` | `undefined` | Callback when range is changed. |
 
 ### DateTimeRange Type Props
@@ -81,6 +84,7 @@ footerslot
 | ranges | `Record<string, [number, number]>` | `undefined` | Customize ranges. |
 | separator | `string` | `'to'` | The separator between the start input and the end input. |
 | start-placeholder | `string` | `'Start Date and Time'` | The prompt information of the start input. |
+| update-value-on-close | `boolean` | `false` | Whether to update value on close. |
 | on-update:value | `(value: [number, number] \| null) => void` | `undefined` | Callback when value is changed. |
 
 ## Slots

src/date-picker/demos/enUS/update-on-close.demo.md

@@ -0,0 +1,34 @@
+# Update Value On Close
+
+```html
+<n-space vertical>
+  <n-date-picker
+    type="datetime"
+    :default-value="Date.now()"
+    :update-value-on-close="updateValueOnClose"
+  />
+  <n-date-picker
+    :default-value="[Date.now(), Date.now()]"
+    :update-value-on-close="updateValueOnClose"
+    type="daterange"
+  />
+  <n-date-picker
+    :default-value="[Date.now(), Date.now()]"
+    :update-value-on-close="updateValueOnClose"
+    type="datetimerange"
+  />
+  <n-switch v-model:value="updateValueOnClose" />
+</n-space>
+```
+
+```js
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
+    return {
+      updateValueOnClose: ref(true)
+    }
+  }
+})
+```

src/date-picker/demos/zhCN/index.demo-entry.md

@@ -17,6 +17,7 @@ events
 format
 ranges
 footerslot
+update-on-close
 ```
 
 ## Props
@@ -53,6 +54,7 @@ footerslot
 | is-date-disabled | `(current: number) => boolean` | `undefined` | 日期禁用的校验函数 |
 | is-time-disabled | `(current: number) => { isHourDisabled: boolean, isMinuteDisabled: boolean, isSecondDisabled: boolean }` | `undefined` | 时间禁用的校验函数 |
 | placeholder | `string` | `'选择日期时间'` | 提示信息 |
+| update-value-on-close | `boolean` | `false` | 关闭面板时更新值 |
 | on-update:value | `(value: number \| null) => void` | `undefined` | 数据更新时触发的回调函数 |
 
 ### DateRange 类型的 Props
@@ -67,6 +69,7 @@ footerslot
 | ranges | `Record<string, [number, number]>` | `undefined` | 用户自定义的快捷选择范围 |
 | separator | `string` | `'至'` | start 选框与 end 选框之间的分隔符 |
 | start-placeholder | `string` | `'开始日期'` | DateRange 中 start 选框的提示信息 |
+| update-value-on-close | `boolean` | `false` | 关闭面板时是否更新值 |
 | on-update:value | `(value: [number, number] \| null) => void` | `undefined` | 数据更新时触发的回调函数 |
 
 ### DateTimeRange 类型的 Props
@@ -81,6 +84,7 @@ footerslot
 | ranges | `Record<string, [number, number]>` | `undefined` | 用户自定义 DateTimeRange 范围 |
 | separator | `string` | `'to'` | start 选框与 end 选框之间的分隔符 |
 | start-placeholder | `string` | `'开始日期时间'` | DateTimeRange 中 start 选框的提示信息 |
+| update-value-on-close | `boolean` | `false` | 关闭面板时是否更新值 |
 | on-update:value | `(value: [number, number] \| null) => void` | `undefined` | 数据更新时触发的回调函数 |
 
 ## Slots

src/date-picker/demos/zhCN/update-on-close.demo.md

@@ -0,0 +1,34 @@
+# 关闭时更新值
+
+```html
+<n-space vertical>
+  <n-date-picker
+    type="datetime"
+    :default-value="Date.now()"
+    :update-value-on-close="updateValueOnClose"
+  />
+  <n-date-picker
+    :default-value="[Date.now(), Date.now()]"
+    :update-value-on-close="updateValueOnClose"
+    type="daterange"
+  />
+  <n-date-picker
+    :default-value="[Date.now(), Date.now()]"
+    :update-value-on-close="updateValueOnClose"
+    type="datetimerange"
+  />
+  <n-switch v-model:value="updateValueOnClose" />
+</n-space>
+```
+
+```js
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
+    return {
+      updateValueOnClose: ref(true)
+    }
+  }
+})
+```

src/date-picker/src/DatePicker.tsx

@@ -68,6 +68,10 @@ const datePickerProps = {
     type: Boolean,
     default: false
   },
+  updateValueOnClose: {
+    type: Boolean,
+    default: false
+  },
   defaultValue: {
     type: [Number, Array] as PropType<Value | null>,
     default: null
@@ -292,9 +296,10 @@ export default defineComponent({
         })
       }
     }
-    function handlePanelClose (): void {
+    function handlePanelClose (disableUpdateOnClose: boolean): void {
       closeCalendar({
-        returnFocus: true
+        returnFocus: true,
+        disableUpdateOnClose
       })
     }
     // --- Panel update value
@@ -426,9 +431,22 @@ export default defineComponent({
       if (props.disabled || mergedShowRef.value) return
       doUpdateShow(true)
     }
-    function closeCalendar ({ returnFocus }: { returnFocus: boolean }): void {
+    function closeCalendar ({
+      returnFocus,
+      disableUpdateOnClose
+    }: {
+      returnFocus: boolean
+      disableUpdateOnClose?: boolean
+    }): void {
       if (mergedShowRef.value) {
         doUpdateShow(false)
+        if (
+          props.type !== 'date' &&
+          props.updateValueOnClose &&
+          !disableUpdateOnClose
+        ) {
+          handlePanelConfirm()
+        }
         if (returnFocus) {
           inputInstRef.value?.focus()
         }

src/date-picker/src/interface.ts

@@ -33,6 +33,8 @@ export type OnPanelUpdateValueImpl = (
   doUpdate: boolean
 ) => void
 
+export type OnClose = (disableUpdateOnClose: boolean) => void
+
 export interface PanelRef {
   $el: HTMLElement
 }

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

@@ -182,12 +182,12 @@ function useCalendar (
   function clearSelectedDateTime (): void {
     panelCommon.doUpdateValue(null, true)
     dateInputValueRef.value = ''
-    panelCommon.doClose()
+    panelCommon.doClose(true)
   }
   function handleNowClick (): void {
     panelCommon.doUpdateValue(getTime(sanitizeValue(Date.now())), true)
     calendarValueRef.value = Date.now()
-    panelCommon.doClose()
+    panelCommon.doClose(true)
   }
   function handleDateClick (dateItem: DateItem): void {
     if (mergedIsDateDisabled(dateItem.ts)) {

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

@@ -11,7 +11,8 @@ import {
   Value,
   datePickerInjectionKey,
   OnPanelUpdateValue,
-  OnPanelUpdateValueImpl
+  OnPanelUpdateValueImpl,
+  OnClose
 } from '../interface'
 
 const DATE_FORMAT = 'yyyy-MM-dd'
@@ -32,7 +33,7 @@ const usePanelCommonProps = {
     default: null
   },
   onConfirm: Function,
-  onClose: Function,
+  onClose: Function as PropType<OnClose>,
   onTabOut: Function,
   onUpdateValue: {
     type: Function as PropType<OnPanelUpdateValue>,
@@ -67,9 +68,9 @@ function usePanelCommon (props: UsePanelCommonProps) {
     const { onUpdateValue } = props
     ;(onUpdateValue as OnPanelUpdateValueImpl)(value, doUpdate)
   }
-  function doClose (): void {
+  function doClose (disableUpdateOnClose: boolean = false): void {
     const { onClose } = props
-    if (onClose) onClose()
+    if (onClose) onClose(disableUpdateOnClose)
   }
   function doTabOut (): void {
     const { onTabOut } = props
@@ -77,7 +78,7 @@ function usePanelCommon (props: UsePanelCommonProps) {
   }
   function handleClearClick (): void {
     doUpdateValue(null, true)
-    doClose()
+    doClose(true)
   }
   function handleFocusDetectorFocus (): void {
     doTabOut()