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

CHANGELOG.en-US.md

@@ -1,5 +1,11 @@
 # CHANGELOG
 
+## NEXT_VERSION
+
+### Features
+
+- `n-date-picker` adds `closePanelOnSelectDate` prop.
+
 ## 2.37.3
 
 ### Fixes

CHANGELOG.zh-CN.md

@@ -1,5 +1,11 @@
 # CHANGELOG
 
+## NEXT_VERSION
+
+### Features
+
+- `n-date-picker` 新增 `closePanelOnSelectDate` 属性
+
 ## 2.37.3
 
 ### Fixes

src/date-picker/src/DatePicker.tsx

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

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

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

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

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

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

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

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

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

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

@@ -22,6 +22,10 @@ export default defineComponent({
       type: Boolean,
       required: true
     },
+    closePanelOnSelectDate: {
+      type: Boolean,
+      required: true
+    },
     calendarMonth: {
       type: String,
       required: true
@@ -35,7 +39,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 +54,18 @@ export default defineComponent({
     function handleHeaderClick (): void {
       showRef.value = !showRef.value
     }
+    function handleClosePanelOnSelectDate (): void {
+      if (props.closePanelOnSelectDate) {
+        showRef.value = false
+      }
+    }
     return {
       show: showRef,
       triggerRef,
       monthPanelRef,
       handleHeaderClick,
-      handleClickOutside
+      handleClickOutside,
+      handleClosePanelOnSelectDate
     }
   },
   render () {
@@ -103,6 +113,7 @@ export default defineComponent({
                                   key="month"
                                   useAsQuickJump
                                   value={this.value}
+                                  onClick={this.handleClosePanelOnSelectDate}
                                 />,
                                 [
                                   [

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

@@ -21,6 +21,7 @@ const TIME_FORMAT = 'HH:mm:ss'
 
 const usePanelCommonProps = {
   active: Boolean,
+  closePanelOnSelectDate: Boolean,
   dateFormat: String,
   timeFormat: {
     type: String,
@@ -32,6 +33,7 @@ const usePanelCommonProps = {
   },
   shortcuts: Object as PropType<Shortcuts>,
   defaultTime: [Number, String, Array] as PropType<DefaultTime>,
+  onClick: Function,
   onClear: Function,
   onConfirm: Function as PropType<(value: Value | null) => void>,
   onClose: Function as PropType<OnClose>,