feat(date-picker): adds closePanelOnSelectYear、closePanelOnSelectMonth prop

CHANGELOG.en-US.md

@@ -26,6 +26,11 @@
 
 - Fix `n-scrollbar`'s `scrollTo(x: number, y: number)` error where the order of method parameters does not match the document.
 
+### Features
+
+- `n-date-picker` adds `closePanelOnSelectYear` prop.
+- `n-date-picker` adds `closePanelOnSelectMonth` prop.
+
 ### Fixes
 
 - Fix `n-tree`'s `override-default-node-click-behavior` prop may conflict with default switcher click or checkbox click behavior.

CHANGELOG.zh-CN.md

@@ -26,6 +26,11 @@
 
 - 修复 `n-scrollbar` 组件的 `scrollTo(x: number, y: number)`方法参数顺序与文档不符的错误
 
+### Features
+
+- `n-date-picker` 新增 `closePanelOnSelectYear` 属性
+- `n-date-picker` 新增 `closePanelOnSelectMonth` 属性
+
 ### Fixes
 
 - 修复 `n-tree` 的 `override-default-node-click-behavior` 属性可能覆盖掉默认展开按钮和选中按钮的行为

src/date-picker/demos/enUS/close-panel-on-select-date.demo.vue

@@ -0,0 +1,56 @@
+<markdown>
+# After selected the year or month, close the panel.
+</markdown>
+
+<template>
+  <n-space vertical>
+    <span>After selected the year or month, close the panel.</span>
+    <n-date-picker
+      v-model:value="timestamp"
+      close-panel-on-select-year
+      close-panel-on-select-month
+      type="date"
+    />
+    <span>After selected the year, close the panel.</span>
+    <n-date-picker
+      v-model:value="timestamp"
+      close-panel-on-select-year
+      type="datetime"
+    />
+    <span>After selected the month, close the panel.</span>
+    <n-date-picker
+      v-model:value="timestamp"
+      close-panel-on-select-month
+      type="week"
+      clearable
+    />
+    <pre>{{ JSON.stringify(timestamp) }}</pre>
+
+    <span>After selected the year, close the panel.</span>
+    <n-date-picker
+      v-model:value="range"
+      close-panel-on-select-year
+      type="daterange"
+    />
+    <span>After selected the month, close the panel.</span>
+    <n-date-picker
+      v-model:value="range"
+      close-panel-on-select-month
+      type="datetimerange"
+    />
+    <pre>{{ JSON.stringify(range) }}</pre>
+  </n-space>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
+    return {
+      timestamp: ref(1183135260000),
+      range: ref<[number, number]>([1183135260000, Date.now()])
+    }
+  }
+})
+</script>

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

@@ -31,6 +31,7 @@ focus.vue
 status.vue
 icon.vue
 panel.vue
+close-panel-on-select-date.vue
 ```
 
 ## API
@@ -77,6 +78,8 @@ panel.vue
 | format | `string` | `'yyyy-MM-dd'` | Format of the input. For detail please see [format](https://date-fns.org/v2.23.0/docs/format). |  |
 | is-date-disabled | `(current: number, detail: { type: 'date', year: number, month: number, date: number } \| { type: 'month', year: number, month: number } \| { type: 'year', year: number } \| { type: 'quarter',  year: number, quarter: number } \| { type: 'input' }) => boolean` | `() => false` | Validator of the date. | `detail` 2.37.1 |
 | placeholder | `string` | `'Select Date'` | Placeholder. |  |
+| close-panel-on-select-year | `boolean` | `false` | After selected the year, close the year and month panel |  |
+| close-panel-on-select-month | `boolean` | `false` | After selected the month, close the year and month panel |  |
 | on-update:formatted-value | `(value: string \| null, timestampValue: number \| null) => void` | `undefined` | Date selected callback. | 2.24.0 |
 | on-update:value | `(value: number \| null, formattedValue: string \| null) => void` | `undefined` | Date selected callback. | `formattedValue` 2.24.0 |
 
@@ -93,6 +96,8 @@ panel.vue
 | placeholder | `string` | `'Select Date and Time'` | Placeholder. |  |
 | time-picker-props | `TimePickerProps` | `undefined` | Time picker props in the panel. | 2.27.0 |
 | update-value-on-close | `boolean` | `false` | Whether to update value on close. |  |
+| close-panel-on-select-year | `boolean` | `false` | After selected the year, close the year and month panel |  |
+| close-panel-on-select-month | `boolean` | `false` | After selected the month, close the year and month panel |  |
 | on-update:formatted-value | `(value: string \| null, timestampValue: number \| null) => void` | `undefined` | Date selected callback. | MEXT_VERSION |
 | on-update:value | `(value: number \| null, formattedValue: string \| null) => void` | `undefined` | Date selected callback. | `formattedValue` 2.24.0 |
 
@@ -112,6 +117,8 @@ panel.vue
 | separator | `string` | internal icon | The separator between the start input and the end input. |  |
 | start-placeholder | `string` | `'Start Date'` | The prompt information at the beginning of the input. |  |
 | update-value-on-close | `boolean` | `false` | Whether to update the value on close. |  |
+| close-panel-on-select-year | `boolean` | `false` | After selected the year, close the year and month panel |  |
+| close-panel-on-select-month | `boolean` | `false` | After selected the month, close the year and month panel |  |
 | on-update:formatted-value | `(value: [string, string] \| null, timestampValue: [number, number] \| null) => void` | `undefined` | Formatted range changed callback. | 2.24.0 |
 | on-update:value | `(value: [number, number] \| null, formattedValue: [string, string] \| null) => void` | `undefined` | Range changed callback. | `formattedValue` 2.24.0 |
 
@@ -132,6 +139,8 @@ panel.vue
 | start-placeholder | `string` | `'Start Date and Time'` | The prompt information at the beginning of the input. |  |
 | time-picker-props | `TimePickerProps \| [TimePickerProps, TimePickerProps]` | `undefined` | Time picker props in the panel. | 2.27.0 |
 | update-value-on-close | `boolean` | `false` | Whether to update value on close. |  |
+| close-panel-on-select-year | `boolean` | `false` | After selected the year, close the year and month panel |  |
+| close-panel-on-select-month | `boolean` | `false` | After selected the month, close the year and month panel |  |
 | on-update:formatted-value | `(value: [string, string] \| null, timestampValue: [number, number] \| null) => void` | `undefined` | Formatted value changed callback. | 2.24.0 |
 | on-update:value | `(value: [number, number] \| null, formattedValue: [string, string] \| null) => void` | `undefined` | Value changed callback. | `formattedValue` 2.24.0 |
 
@@ -179,6 +188,8 @@ panel.vue
 | default-calendar-start-time | `number` | `undefined` | Default panel calendar start month timestamp. | 2.38.1 |
 | format | `string` | `'yyyy-w'` for en-US, Locale specific. | Format of the input. For detail please see [format](https://date-fns.org/v2.23.0/docs/format). | 2.37.0 |
 | placeholder | `string` | `'Select Week'` for en-US, Locale specific. | Placeholder. | 2.37.0 |
+| close-panel-on-select-year | `boolean` | `false` | After selected the year, close the year and month panel |  |
+| close-panel-on-select-month | `boolean` | `false` | After selected the month, close the year and month panel |  |
 | on-update:formatted-value | `(value: string \| null, timestampValue: number \| null) => void` | `undefined` | Formatted value changed callback. | 2.37.0 |
 | on-update:value | `(value: number \| null, formattedValue: string \| null) => void` | `undefined` | Value changed callback. | 2.37.0 |
 

src/date-picker/demos/zhCN/close-panel-on-select-date.demo.vue

@@ -0,0 +1,56 @@
+<markdown>
+# 选择年、月后，关闭面板
+</markdown>
+
+<template>
+  <n-space vertical>
+    <span>选择年或月，关闭面板</span>
+    <n-date-picker
+      v-model:value="timestamp"
+      close-panel-on-select-year
+      close-panel-on-select-month
+      type="date"
+    />
+    <span>选择年，关闭面板</span>
+    <n-date-picker
+      v-model:value="timestamp"
+      close-panel-on-select-year
+      type="datetime"
+    />
+    <span>选择月，关闭面板</span>
+    <n-date-picker
+      v-model:value="timestamp"
+      close-panel-on-select-month
+      type="week"
+      clearable
+    />
+    <pre>{{ JSON.stringify(timestamp) }}</pre>
+
+    <span>选择年，关闭面板</span>
+    <n-date-picker
+      v-model:value="range"
+      close-panel-on-select-year
+      type="daterange"
+    />
+    <span>选择月，关闭面板</span>
+    <n-date-picker
+      v-model:value="range"
+      close-panel-on-select-month
+      type="datetimerange"
+    />
+    <pre>{{ JSON.stringify(range) }}</pre>
+  </n-space>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
+    return {
+      timestamp: ref(1183135260000),
+      range: ref<[number, number]>([1183135260000, Date.now()])
+    }
+  }
+})
+</script>

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

@@ -30,6 +30,7 @@ status.vue
 icon.vue
 panel.vue
 panel-debug.vue
+close-panel-on-select-date.vue
 form-debug.vue
 ```
 
@@ -78,6 +79,8 @@ form-debug.vue
 | format | `string` | `'yyyy-MM-dd'` | 时间格式化字符串，详情见 [format](https://date-fns.org/v2.23.0/docs/format) |  |
 | is-date-disabled | `(current: number, detail: { type: 'date', year: number, month: number, date: number } \| { type: 'month', year: number, month: number } \| { type: 'year', year: number } \| { type: 'quarter',  year: number, quarter: number } \| { type: 'input' }) => boolean` | `undefined` | 日期禁用的校验函数 | `detail` 2.37.1 |
 | placeholder | `string` | `'选择日期'` | 没有值时的占位信息 |  |
+| close-panel-on-select-year | `boolean` | `false` | 选择年后，关闭年月面板 |  |
+| close-panel-on-select-month | `boolean` | `false` | 选择月后，关闭年月面板 |  |
 | on-update:formatted-value | `(value: string \| null, timestampValue: number \| null) => void` | `undefined` | 受控数据更新时触发的回调函数 | 2.24.0 |
 | on-update:value | `(value: number \| null, formattedValue: string \| null) => void` | `undefined` | 受控数据更新时触发的回调函数 | `formattedValue` 2.24.0 |
 
@@ -94,6 +97,8 @@ form-debug.vue
 | placeholder | `string` | `'选择日期时间'` | 提示信息 |  |
 | time-picker-props | `TimePickerProps` | `undefined` | 面板中时间选择器的属性 | 2.27.0 |
 | update-value-on-close | `boolean` | `false` | 关闭面板时更新值 |  |
+| close-panel-on-select-year | `boolean` | `false` | 选择年后，关闭年月面板 |  |
+| close-panel-on-select-month | `boolean` | `false` | 选择月后，关闭年月面板 |  |
 | on-update:formatted-value | `(value: string \| null, timestampValue: number \| null) => void` | `undefined` | 数据更新时触发的回调函数 | 2.24.0 |
 | on-update:value | `(value: number \| null, formattedValue: string \| null) => void` | `undefined` | 数据更新时触发的回调函数 | `formattedValue` 2.24.0 |
 
@@ -112,6 +117,8 @@ form-debug.vue
 | separator | `string` | 内置图标 | start 选框与 end 选框之间的分隔符 |  |
 | start-placeholder | `string` | `'开始日期'` | DateRange 中 start 选框的提示信息 |  |
 | update-value-on-close | `boolean` | `false` | 关闭面板时是否更新值 |  |
+| close-panel-on-select-year | `boolean` | `false` | 选择年后，关闭年月面板 |  |
+| close-panel-on-select-month | `boolean` | `false` | 选择月后，关闭年月面板 |  |
 | on-update:formatted-value | `(value: [string, string] \| null, timestampValue: [number, number] \| null) => void` | `undefined` | 数据更新时触发的回调函数 | 2.24.0 |
 | on-update:value | `(value: [number, number] \| null, formattedValue: [string, string] \| null) => void` | `undefined` | 数据更新时触发的回调函数 | `formattedValue` 2.24.0 |
 
@@ -132,6 +139,8 @@ form-debug.vue
 | start-placeholder | `string` | `'开始日期时间'` | DateTimeRange 中 start 选框的提示信息 |  |
 | time-picker-props | `TimePickerProps \| [TimePickerProps, TimePickerProps]` | `undefined` | 面板中时间选择器的属性 | 2.27.0 |
 | update-value-on-close | `boolean` | `false` | 关闭面板时是否更新值 |  |
+| close-panel-on-select-year | `boolean` | `false` | 选择年后，关闭年月面板 |  |
+| close-panel-on-select-month | `boolean` | `false` | 选择月后，关闭年月面板 |  |
 | on-update:formatted-value | `(value: [string, string] \| null, timestampValue: [number, number] \| null) => void` | `undefined` | 数据更新时触发的回调函数 | 2.24.0 |
 | on-update:value | `(value: [number, number] \| null, formattedValue: [string, string] \| null) => void` | `undefined` | 数据更新时触发的回调函数 | `formattedValue` 2.24.0 |
 
@@ -179,6 +188,8 @@ form-debug.vue
 | default-calendar-start-time | `number` | `undefined` | 面板日历默认开始的月份时间戳 | 2.38.1 |
 | format | `string` | 中文为 `'yyyy-w'`，随语言变化 | 时间格式化字符串，详情见 [format](https://date-fns.org/v2.23.0/docs/format) | 2.37.0 |
 | placeholder | `string` | 中文为 `'选择周'`，随语言变化 | 没有值时的占位信息 | 2.37.0 |
+| close-panel-on-select-year | `boolean` | `false` | 选择年后，关闭年月面板 |  |
+| close-panel-on-select-month | `boolean` | `false` | 选择月后，关闭年月面板 |  |
 | on-update:formatted-value | `(value: string \| null, timestampValue: number \| null) => void` | `undefined` | 受控数据更新时触发的回调函数 | 2.37.0 |
 | on-update:value | `(value: number \| null, formattedValue: string \| null) => void` | `undefined` | 受控数据更新时触发的回调函数 | 2.37.0 |
 

src/date-picker/src/DatePicker.tsx

@@ -87,6 +87,8 @@ export const datePickerProps = {
     default: undefined
   },
   clearable: Boolean,
+  closePanelOnSelectYear: Boolean,
+  closePanelOnSelectMonth: Boolean,
   updateValueOnClose: Boolean,
   defaultValue: [Number, Array] as PropType<Value | null>,
   defaultFormattedValue: [String, Array] as PropType<FormattedValue | null>,
@@ -1018,6 +1020,8 @@ export default defineComponent({
       defaultTime: this.defaultTime,
       themeClass: this.themeClass,
       panel: this.panel,
+      closePanelOnSelectYear: this.closePanelOnSelectYear,
+      closePanelOnSelectMonth: this.closePanelOnSelectMonth,
       onRender: this.onRender,
       onNextMonth: this.onNextMonth,
       onPrevMonth: this.onPrevMonth,

src/date-picker/src/panel/date.tsx

@@ -77,6 +77,8 @@ export default defineComponent({
               mergedClsPrefix={mergedClsPrefix}
               calendarMonth={this.calendarMonth}
               calendarYear={this.calendarYear}
+              closePanelOnSelectYear={this.closePanelOnSelectYear}
+              closePanelOnSelectMonth={this.closePanelOnSelectMonth}
             />
             <div
               class={`${mergedClsPrefix}-date-panel-month__next`}

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

@@ -67,6 +67,8 @@ export default defineComponent({
               mergedClsPrefix={mergedClsPrefix}
               calendarMonth={this.startCalendarMonth}
               calendarYear={this.startCalendarYear}
+              closePanelOnSelectYear={this.closePanelOnSelectYear}
+              closePanelOnSelectMonth={this.closePanelOnSelectMonth}
             />
             <div
               class={`${mergedClsPrefix}-date-panel-month__next`}
@@ -157,6 +159,8 @@ export default defineComponent({
               mergedClsPrefix={mergedClsPrefix}
               calendarMonth={this.endCalendarMonth}
               calendarYear={this.endCalendarYear}
+              closePanelOnSelectYear={this.closePanelOnSelectYear}
+              closePanelOnSelectMonth={this.closePanelOnSelectMonth}
             />
             <div
               class={`${mergedClsPrefix}-date-panel-month__next`}

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

@@ -99,6 +99,8 @@ export default defineComponent({
               mergedClsPrefix={mergedClsPrefix}
               calendarMonth={this.calendarMonth}
               calendarYear={this.calendarYear}
+              closePanelOnSelectYear={this.closePanelOnSelectYear}
+              closePanelOnSelectMonth={this.closePanelOnSelectMonth}
             />
             <div
               class={`${mergedClsPrefix}-date-panel-month__next`}

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

@@ -140,6 +140,8 @@ export default defineComponent({
               mergedClsPrefix={mergedClsPrefix}
               calendarMonth={this.startCalendarMonth}
               calendarYear={this.startCalendarYear}
+              closePanelOnSelectYear={this.closePanelOnSelectYear}
+              closePanelOnSelectMonth={this.closePanelOnSelectMonth}
             />
             <div
               class={`${mergedClsPrefix}-date-panel-month__next`}
@@ -240,6 +242,8 @@ export default defineComponent({
               mergedClsPrefix={mergedClsPrefix}
               calendarMonth={this.endCalendarMonth}
               calendarYear={this.endCalendarYear}
+              closePanelOnSelectYear={this.closePanelOnSelectYear}
+              closePanelOnSelectMonth={this.closePanelOnSelectMonth}
             />
             <div
               class={`${mergedClsPrefix}-date-panel-month__next`}

src/date-picker/src/panel/month.tsx

@@ -102,6 +102,12 @@ export default defineComponent({
               `${mergedClsPrefix}-date-panel-month-calendar__picker-col-item--disabled`
           ]}
           onClick={() => {
+            if (item.type === 'month') {
+              props.onSelectMonth?.()
+            } else if (item.type === 'year') {
+              props.onSelectYear?.()
+            }
+
             useAsQuickJump
               ? handleQuickMonthClick(item, (value) => {
                 ;(props.onUpdateValue as OnPanelUpdateValueImpl)(value, false)

src/date-picker/src/panel/panelHeader.tsx

@@ -22,6 +22,14 @@ export default defineComponent({
       type: Boolean,
       required: true
     },
+    closePanelOnSelectYear: {
+      type: Boolean,
+      default: false
+    },
+    closePanelOnSelectMonth: {
+      type: Boolean,
+      default: false
+    },
     calendarMonth: {
       type: String,
       required: true
@@ -35,7 +43,7 @@ export default defineComponent({
       required: true
     }
   },
-  setup () {
+  setup (props) {
     const triggerRef = ref<HTMLElement | null>(null)
     const monthPanelRef = ref<InstanceType<typeof MonthPanel> | null>(null)
     const showRef = ref(false)
@@ -50,12 +58,24 @@ export default defineComponent({
     function handleHeaderClick (): void {
       showRef.value = !showRef.value
     }
+    function handleClosePanelOnSelectYear (): void {
+      if (props.closePanelOnSelectYear) {
+        showRef.value = false
+      }
+    }
+    function handleClosePanelOnSelectMonth (): void {
+      if (props.closePanelOnSelectMonth) {
+        showRef.value = false
+      }
+    }
     return {
       show: showRef,
       triggerRef,
       monthPanelRef,
       handleHeaderClick,
-      handleClickOutside
+      handleClickOutside,
+      handleClosePanelOnSelectYear,
+      handleClosePanelOnSelectMonth
     }
   },
   render () {
@@ -103,6 +123,12 @@ export default defineComponent({
                                   key="month"
                                   useAsQuickJump
                                   value={this.value}
+                                  onSelectYear={
+                                    this.handleClosePanelOnSelectYear
+                                  }
+                                  onSelectMonth={
+                                    this.handleClosePanelOnSelectMonth
+                                  }
                                 />,
                                 [
                                   [