tusen-ai · pengzhen-developer · Feb 6, 2025
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -1,5 +1,13 @@
 # CHANGELOG
 
+## NEXT_VERSION
+
+### Feats
+
+- `n-date-picker` adds `close-panel-on-select-date` prop.
+- `n-date-picker` adds `close-panel-on-select-year` prop.
+- `n-date-picker` adds `close-panel-on-select-month` prop.
+
 ## 2.41.0
 
 `2025-01-05`

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -1,5 +1,13 @@
 # CHANGELOG
 
+## NEXT_VERSION
+
+### Feats
+
+- `n-date-picker` 新增 `close-panel-on-select-date` 参数
+- `n-date-picker` 新增 `close-panel-on-select-year` 参数
+- `n-date-picker` 新增 `close-panel-on-select-month` 参数
+
 ## 2.41.0
 
 `2025-01-05`

diff --git a/src/date-picker/demos/enUS/close-panel-on-select.demo.vue b/src/date-picker/demos/enUS/close-panel-on-select.demo.vue
@@ -0,0 +1,80 @@
+<markdown>
+  # Close panel after selecting year or month.
+</markdown>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup() {
+    return {
+      timestamp: ref(1183135260000),
+      range: ref<[number, number]>([1183135260000, Date.now()])
+    }
+  }
+})
+</script>
+
+<template>
+  <NSpace vertical>
+    <div>
+      <div>Close panel after selecting year.</div>
+      <n-date-picker
+        v-model:value="timestamp"
+        type="date"
+        close-panel-on-select-year
+      />
+      <n-date-picker
+        v-model:value="range"
+        type="daterange"
+        close-panel-on-select-year
+      />
+      <n-date-picker
+        v-model:value="range"
+        type="datetimerange"
+        close-panel-on-select-year
+      />
+      <pre>{{ JSON.stringify(timestamp) }}</pre>
+    </div>
+
+    <div>
+      <div>Close panel after selecting month.</div>
+      <n-date-picker
+        v-model:value="timestamp"
+        type="date"
+        close-panel-on-select-month
+      />
+      <n-date-picker
+        v-model:value="range"
+        type="daterange"
+        close-panel-on-select-month
+      />
+      <n-date-picker
+        v-model:value="range"
+        type="datetimerange"
+        close-panel-on-select-month
+      />
+      <pre>{{ JSON.stringify(timestamp) }}</pre>
+    </div>
+
+    <div>
+      <div>Close panel after selecting year or month.</div>
+      <n-date-picker
+        v-model:value="timestamp"
+        type="date"
+        close-panel-on-select-date
+      />
+      <n-date-picker
+        v-model:value="range"
+        type="daterange"
+        close-panel-on-select-date
+      />
+      <n-date-picker
+        v-model:value="range"
+        type="datetimerange"
+        close-panel-on-select-date
+      />
+      <pre>{{ JSON.stringify(timestamp) }}</pre>
+    </div>
+  </NSpace>
+</template>
diff --git a/src/date-picker/demos/enUS/index.demo-entry.md b/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.vue
 ```
 
 ## API
@@ -85,6 +86,9 @@ 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-date | `boolean` | `undefined` | Close year and month panel after selecting year or month. | NEXT_VERSION |
+| close-panel-on-select-year | `boolean` | `undefined` | Close year and month panel after selecting year. | NEXT_VERSION |
+| close-panel-on-select-month | `boolean` | `undefined` | Close year and month panel after selecting month. | NEXT_VERSION |
 | 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 |
 
@@ -99,6 +103,9 @@ panel.vue
 | 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 |
 | is-time-disabled | `(current: number) => { isHourDisabled?: () => boolean, isMinuteDisabled?: () => boolean, isSecondDisabled?: () => boolean }` | `undefined` | Validator of the time. |  |
 | placeholder | `string` | `'Select Date and Time'` | Placeholder. |  |
+| close-panel-on-select-date | `boolean` | `undefined` | Close year and month panel after selecting year or month. | NEXT_VERSION |
+| close-panel-on-select-year | `boolean` | `undefined` | Close year and month panel after selecting year. | NEXT_VERSION |
+| close-panel-on-select-month | `boolean` | `undefined` | Close year and month panel after selecting month. | NEXT_VERSION |
 | 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. |  |
 | on-update:formatted-value | `(value: string \| null, timestampValue: number \| null) => void` | `undefined` | Date selected callback. | MEXT_VERSION |
@@ -114,6 +121,9 @@ panel.vue
 | default-calendar-end-time | `number` | `undefined` | Default panel calendar end month timestamp. | 2.28.3 |
 | end-placeholder | `string` | `'End Date'` | Placeholder at end part of the input. |  |
 | format | `string` | `'yyyy-MM-dd'` | Format of the input. For detail please see [format](https://date-fns.org/v2.23.0/docs/format). |  |
+| close-panel-on-select-date | `boolean` | `undefined` | Close year and month panel after selecting year or month. | NEXT_VERSION |
+| close-panel-on-select-year | `boolean` | `undefined` | Close year and month panel after selecting year. | NEXT_VERSION |
+| close-panel-on-select-month | `boolean` | `undefined` | Close year and month panel after selecting month. | NEXT_VERSION |
 | is-date-disabled | `(current: number, phase: 'start' \| 'end', value: [number, number] \| null) => boolean` | `undefined` | Validator of the date. | `detail` 2.37.1 |
 | is-time-disabled | `(current: number, phase: 'start' \| 'end', value: [number, number]) => { isHourDisabled?: (hour: number) => boolean, isMinuteDisabled?: (minute: number, hour: number \| null) => boolean, isSecondDisabled?: (second: number, minute: number \| null, hour: number \| null) => boolean }` | `undefined` | Validator of the time. `null` in validators means value of picker is empty. |  |
 | close-on-select | `boolean` | `false` | Whether to close the panel after the user has selected a time range. |  |
@@ -134,6 +144,9 @@ panel.vue
 | default-time | `string \| Array<string \| undefined>` | `undefined` | Default time of the selected date. It's format is `HH:mm:ss`. | 2.22.0 |
 | end-placeholder | `string` | `'End Date and Time'` | Placeholder at end part of the input. |  |
 | format | `string` | `'yyyy-MM-dd HH:mm:ss'` | Format of the input. For detail please see [format](https://date-fns.org/v2.23.0/docs/format). |  |
+| close-panel-on-select-date | `boolean` | `undefined` | Close year and month panel after selecting year or month. | NEXT_VERSION |
+| close-panel-on-select-year | `boolean` | `undefined` | Close year and month panel after selecting year. | NEXT_VERSION |
+| close-panel-on-select-month | `boolean` | `undefined` | Close year and month panel after selecting month. | NEXT_VERSION |
 | is-date-disabled | `(current: number, phase: 'start' \| 'end', value: [number, number] \| null) => boolean` | `undefined` | Validator of the date. |  |
 | is-time-disabled | `(current: number, phase: 'start' \| 'end', value: [number, number]) => { isHourDisabled?: (hour: number) => boolean, isMinuteDisabled?: (minute: number, hour: number \| null) => boolean, isSecondDisabled?: (second: number, minute: number \| null, hour: number \| null) => boolean }` | `undefined` | Validator of the time. `null` in validators means value of picker is empty. |  |
 | separator | `string` | internal icon | The separator between the start input and the end input. |  |

diff --git a/src/date-picker/demos/zhCN/close-panel-on-select.demo.vue b/src/date-picker/demos/zhCN/close-panel-on-select.demo.vue
@@ -0,0 +1,95 @@
+<markdown>
+  # 当选择年、月后，关闭年月面板
+  </markdown>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup() {
+    return {
+      timestamp: ref(1183135260000),
+      range: ref<[number, number]>([1183135260000, Date.now()])
+    }
+  }
+})
+</script>
+
+<template>
+  <NSpace vertical>
+    <div>
+      <div>选择年份后，关闭面板</div>
+      <n-date-picker
+        v-model:value="timestamp"
+        type="date"
+        close-panel-on-select-year
+      />
+      <n-date-picker
+        v-model:value="timestamp"
+        type="datetime"
+        close-panel-on-select-year
+      />
+      <n-date-picker
+        v-model:value="range"
+        type="daterange"
+        close-panel-on-select-year
+      />
+      <n-date-picker
+        v-model:value="range"
+        type="datetimerange"
+        close-panel-on-select-year
+      />
+      <pre>{{ JSON.stringify(timestamp) }}</pre>
+    </div>
+
+    <div>
+      <div>选择月份后，关闭面板</div>
+      <n-date-picker
+        v-model:value="timestamp"
+        type="date"
+        close-panel-on-select-month
+      />
+      <n-date-picker
+        v-model:value="timestamp"
+        type="datetime"
+        close-panel-on-select-month
+      />
+      <n-date-picker
+        v-model:value="range"
+        type="daterange"
+        close-panel-on-select-month
+      />
+      <n-date-picker
+        v-model:value="range"
+        type="datetimerange"
+        close-panel-on-select-month
+      />
+      <pre>{{ JSON.stringify(timestamp) }}</pre>
+    </div>
+
+    <div>
+      <div>选择年份或月份后，关闭面板</div>
+      <n-date-picker
+        v-model:value="timestamp"
+        type="date"
+        close-panel-on-select-date
+      />
+      <n-date-picker
+        v-model:value="timestamp"
+        type="datetime"
+        close-panel-on-select-date
+      />
+      <n-date-picker
+        v-model:value="range"
+        type="daterange"
+        close-panel-on-select-date
+      />
+      <n-date-picker
+        v-model:value="range"
+        type="datetimerange"
+        close-panel-on-select-date
+      />
+      <pre>{{ JSON.stringify(timestamp) }}</pre>
+    </div>
+  </NSpace>
+</template>
diff --git a/src/date-picker/demos/zhCN/index.demo-entry.md b/src/date-picker/demos/zhCN/index.demo-entry.md
@@ -29,6 +29,7 @@ footerslot.vue
 status.vue
 icon.vue
 panel.vue
+close-panel-on-select.vue
 panel-debug.vue
 form-debug.vue
 ```
@@ -86,6 +87,9 @@ 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-date | `boolean` | `undefined` | 为 `true` 时，选择年、月后，关闭年月面板 | NEXT_VERSION |
+| close-panel-on-select-year | `boolean` | `undefined` | 为 `true` 时，选择年份后，关闭年月面板 | NEXT_VERSION |
+| close-panel-on-select-month | `boolean` | `undefined` | 为 `true` 时，选择月份后，关闭年月面板 | NEXT_VERSION |
 | 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 |
 
@@ -100,6 +104,9 @@ form-debug.vue
 | 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 |
 | is-time-disabled | `(current: number) => { isHourDisabled: boolean, isMinuteDisabled: boolean, isSecondDisabled: boolean }` | `undefined` | 时间禁用的校验函数 |  |
 | placeholder | `string` | `'选择日期时间'` | 提示信息 |  |
+| close-panel-on-select-date | `boolean` | `undefined` | 为 `true` 时，选择年、月后，关闭年月面板 | NEXT_VERSION |
+| close-panel-on-select-year | `boolean` | `undefined` | 为 `true` 时，选择年份后，关闭年月面板 | NEXT_VERSION |
+| close-panel-on-select-month | `boolean` | `undefined` | 为 `true` 时，选择月份后，关闭年月面板 | NEXT_VERSION |
 | time-picker-props | `TimePickerProps` | `undefined` | 面板中时间选择器的属性 | 2.27.0 |
 | update-value-on-close | `boolean` | `false` | 关闭面板时更新值 |  |
 | on-update:formatted-value | `(value: string \| null, timestampValue: number \| null) => void` | `undefined` | 数据更新时触发的回调函数 | 2.24.0 |
@@ -114,6 +121,9 @@ form-debug.vue
 | default-calendar-start-time | `number` | `undefined` | 面板日历默认开始的月份时间戳 | 2.28.3 |
 | default-calendar-end-time | `number` | `undefined` | 面板日历默认结束的月份时间戳 | 2.28.3 |
 | format | `string` | `'yyyy-MM-dd'` | 时间格式化字符串，详情见 [format](https://date-fns.org/v2.23.0/docs/format) |  |
+| close-panel-on-select-date | `boolean` | `undefined` | 为 `true` 时，选择年、月后，关闭年月面板 | NEXT_VERSION |
+| close-panel-on-select-year | `boolean` | `undefined` | 为 `true` 时，选择年份后，关闭年月面板 | NEXT_VERSION |
+| close-panel-on-select-month | `boolean` | `undefined` | 为 `true` 时，选择月份后，关闭年月面板 | NEXT_VERSION |
 | is-date-disabled | `(current: number, phase: 'start' \| 'end', value: [number, number] \| null) => boolean` | `undefined` | 日期禁用的校验函数 |  |
 | is-time-disabled | `(current: number, phase: 'start' \| 'end', value: [number, number]) => { isHourDisabled?: (hour: number) => boolean, isMinuteDisabled?: (minute: number, hour: number \| null) => boolean, isSecondDisabled?: (second: number, minute: number \| null, hour: number \| null) => boolean }` | `undefined` | 时间禁用的校验函数，校验函数中的 `null` 表示当前没有选中值 |  |
 | close-on-select | `boolean` | `false` | 用户选择时间范围后是否自动关闭面板 |  |
@@ -134,6 +144,9 @@ form-debug.vue
 | default-time | `string \| Array<string \| undefined>` | `undefined` | 默认时间，格式为 `HH:mm:ss` | 2.22.0 |
 | end-placeholder | `string` | `'结束日期时间'` | DateTimeRange 中 end 选框的提示信息 |  |
 | format | `string` | `'yyyy-MM-dd HH:mm:ss'` | 时间格式化字符串，详情见 [format](https://date-fns.org/v2.23.0/docs/format) |  |
+| close-panel-on-select-date | `boolean` | `undefined` | 为 `true` 时，选择年、月后，关闭年月面板 | NEXT_VERSION |
+| close-panel-on-select-year | `boolean` | `undefined` | 为 `true` 时，选择年份后，关闭年月面板 | NEXT_VERSION |
+| close-panel-on-select-month | `boolean` | `undefined` | 为 `true` 时，选择月份后，关闭年月面板 | NEXT_VERSION |
 | is-date-disabled | `(current: number, phase: 'start' \| 'end', value: [number, number] \| null) => boolean` | `undefined` | 日期禁用的校验函数 |  |
 | is-time-disabled | `(current: number, phase: 'start' \| 'end', value: [number, number]) => { isHourDisabled?: (hour: number) => boolean, isMinuteDisabled?: (minute: number, hour: number \| null) => boolean, isSecondDisabled?: (second: number, minute: number \| null, hour: number \| null) => boolean }` | `undefined` | 时间禁用的校验函数，校验函数中的 `null` 表示当前没有选中值 |  |
 | separator | `string` | 内置图标 | start 选框与 end 选框之间的分隔符 |  |

diff --git a/src/date-picker/src/DatePicker.tsx b/src/date-picker/src/DatePicker.tsx
@@ -983,6 +983,9 @@ export default defineComponent({
       onPrevYear: this.onPrevYear,
       timerPickerFormat: this.timerPickerFormat,
       dateFormat: this.dateFormat,
+      closePanelOnSelectDate: this.closePanelOnSelectDate,
+      closePanelOnSelectYear: this.closePanelOnSelectYear,
+      closePanelOnSelectMonth: this.closePanelOnSelectMonth,
       calendarDayFormat: this.calendarDayFormat,
       calendarHeaderYearFormat: this.calendarHeaderYearFormat,
       calendarHeaderMonthFormat: this.calendarHeaderMonthFormat,

diff --git a/src/date-picker/src/panel/date.tsx b/src/date-picker/src/panel/date.tsx
@@ -89,6 +89,9 @@ export default defineComponent({
               ])}
             </div>
             <PanelHeader
+              closePanelOnSelectDate={this.closePanelOnSelectDate}
+              closePanelOnSelectYear={this.closePanelOnSelectYear}
+              closePanelOnSelectMonth={this.closePanelOnSelectMonth}
               monthYearSeparator={this.calendarHeaderMonthYearSeparator}
               monthBeforeYear={this.calendarMonthBeforeYear}
               value={this.calendarValue}

diff --git a/src/date-picker/src/panel/daterange.tsx b/src/date-picker/src/panel/daterange.tsx
@@ -80,6 +80,9 @@ export default defineComponent({
               ])}
             </div>
             <PanelHeader
+              closePanelOnSelectDate={this.closePanelOnSelectDate}
+              closePanelOnSelectYear={this.closePanelOnSelectYear}
+              closePanelOnSelectMonth={this.closePanelOnSelectMonth}
               monthYearSeparator={this.calendarHeaderMonthYearSeparator}
               monthBeforeYear={this.calendarMonthBeforeYear}
               value={this.startCalendarDateTime}
@@ -179,6 +182,9 @@ export default defineComponent({
               ])}
             </div>
             <PanelHeader
+              closePanelOnSelectDate={this.closePanelOnSelectDate}
+              closePanelOnSelectYear={this.closePanelOnSelectYear}
+              closePanelOnSelectMonth={this.closePanelOnSelectMonth}
               monthYearSeparator={this.calendarHeaderMonthYearSeparator}
               monthBeforeYear={this.calendarMonthBeforeYear}
               value={this.endCalendarDateTime}

diff --git a/src/date-picker/src/panel/datetime.tsx b/src/date-picker/src/panel/datetime.tsx
@@ -104,6 +104,9 @@ export default defineComponent({
               ])}
             </div>
             <PanelHeader
+              closePanelOnSelectDate={this.closePanelOnSelectDate}
+              closePanelOnSelectYear={this.closePanelOnSelectYear}
+              closePanelOnSelectMonth={this.closePanelOnSelectMonth}
               monthYearSeparator={this.calendarHeaderMonthYearSeparator}
               monthBeforeYear={this.calendarMonthBeforeYear}
               value={this.calendarValue}

diff --git a/src/date-picker/src/panel/datetimerange.tsx b/src/date-picker/src/panel/datetimerange.tsx
@@ -149,6 +149,9 @@ export default defineComponent({
               ])}
             </div>
             <PanelHeader
+              closePanelOnSelectDate={this.closePanelOnSelectDate}
+              closePanelOnSelectYear={this.closePanelOnSelectYear}
+              closePanelOnSelectMonth={this.closePanelOnSelectMonth}
               monthYearSeparator={this.calendarHeaderMonthYearSeparator}
               monthBeforeYear={this.calendarMonthBeforeYear}
               value={this.startCalendarDateTime}
@@ -258,6 +261,9 @@ export default defineComponent({
               ])}
             </div>
             <PanelHeader
+              closePanelOnSelectDate={this.closePanelOnSelectDate}
+              closePanelOnSelectYear={this.closePanelOnSelectYear}
+              closePanelOnSelectMonth={this.closePanelOnSelectMonth}
               monthBeforeYear={this.calendarMonthBeforeYear}
               value={this.endCalendarDateTime}
               onUpdateValue={this.onUpdateEndCalendarValue}

diff --git a/src/date-picker/src/panel/month.tsx b/src/date-picker/src/panel/month.tsx
@@ -108,6 +108,13 @@ export default defineComponent({
             && `${mergedClsPrefix}-date-panel-month-calendar__picker-col-item--disabled`
           ]}
           onClick={() => {
+            if (item.type === 'year') {
+              props.onSelectYear?.()
+            }
+            else if (item.type === 'month') {
+              props.onSelectMonth?.()
+            }
+
             if (useAsQuickJump) {
               handleQuickMonthClick(item, (value) => {
                 ;(props.onUpdateValue as OnPanelUpdateValueImpl)(value, false)