feat(date-picker): adds on-prev-month on-next-month `on-prev-year…

…` `on-next-year` prop (#5452) Co-authored-by: 07akioni <07akioni2@gmail.com>
tusen-ai · Dec 18, 2023 · 372e70b · 372e70b
1 parent 1b11276
commit 372e70b
Show file tree

Hide file tree

Showing 7 changed files with 33 additions and 3 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -14,6 +14,7 @@
 - `n-select` supports RTL.
 - `n-data-table` supports RTL.
 - `n-dialog` supports RTL.
+- `n-date-picker` adds `on-prev-month` `on-next-month` `on-prev-year` `on-next-year` prop, closes [#5350](https://github.com/tusen-ai/naive-ui/issues/5350)
 
 ## 2.36.0
 

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -15,6 +15,7 @@
 - `n-data-table` 支持 RTL
 - `n-dialog` 支持 RTL
 - `n-select` 新增 `header` 插槽，关闭 [#5448](https://github.com/tusen-ai/naive-ui/issues/5448)
+- `n-date-picker` 新增 `on-prev-month` `on-next-month` `on-prev-year` `on-next-year` 属性，关闭 [#5350](https://github.com/tusen-ai/naive-ui/issues/5350)
 
 ## 2.36.0
 

diff --git a/src/date-picker/demos/enUS/index.demo-entry.md b/src/date-picker/demos/enUS/index.demo-entry.md
@@ -59,6 +59,10 @@ panel.vue
 | on-blur | `() => void` | `undefined` | On blur callback. |  |
 | on-focus | `() => void` | `undefined` | On focus callback. |  |
 | on-update:show | `(show: boolean) => void` | `undefined` | Callback when panel shows & hides. | 2.28.3 |
+| on-prev-month | `() => void` | `undefined` | Callback when click prev month button. | NEXT_VERSION |
+| on-next-month | `() => void` | `undefined` | Callback when click next month button. | NEXT_VERSION |
+| on-prev-year | `() => void` | `undefined` | Callback when click prev year button. | NEXT_VERSION |
+| on-next-year | `() => void` | `undefined` | Callback when click next year button. | NEXT_VERSION |
 
 ### Date Type Props
 

diff --git a/src/date-picker/demos/zhCN/index.demo-entry.md b/src/date-picker/demos/zhCN/index.demo-entry.md
@@ -60,6 +60,10 @@ form-debug.vue
 | on-blur | `() => void` | `undefined` | 用户 blur 时执行的回调 |  |
 | on-focus | `() => void` | `undefined` | 用户 focus 时执行的回调 |  |
 | on-update:show | `(show: boolean) => void` | `undefined` | 面板打开、关闭时的回调 | 2.28.3 |
+| on-prev-month | `() => void` | `undefined` | 点击上一个月时的回调 | NEXT_VERSION |
+| on-next-month | `() => void` | `undefined` | 点击下一个月时的回调 | NEXT_VERSION |
+| on-prev-year | `() => void` | `undefined` | 点击上一年时的回调 | NEXT_VERSION |
+| on-next-year | `() => void` | `undefined` | 点击下一年时的回调 | NEXT_VERSION |
 
 ### Date 类型的 Props
 

diff --git a/src/date-picker/src/DatePicker.tsx b/src/date-picker/src/DatePicker.tsx
@@ -152,6 +152,10 @@ export const datePickerProps = {
   onUpdateValue: [Function, Array] as PropType<MaybeArray<OnUpdateValue>>,
   onFocus: [Function, Array] as PropType<(e: FocusEvent) => void>,
   onBlur: [Function, Array] as PropType<(e: FocusEvent) => void>,
+  onNextMonth: Function as PropType<() => void>,
+  onPrevMonth: Function as PropType<() => void>,
+  onNextYear: Function as PropType<() => void>,
+  onPrevYear: Function as PropType<() => void>,
   // deprecated
   onChange: [Function, Array] as PropType<MaybeArray<OnUpdateValue>>
 } as const
@@ -966,7 +970,11 @@ export default defineComponent({
       triggerOnRender: triggerThemeClassHandle?.onRender,
       cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
       themeClass: themeClassHandle?.themeClass,
-      onRender: themeClassHandle?.onRender
+      onRender: themeClassHandle?.onRender,
+      onNextMonth: props.onNextMonth,
+      onPrevMonth: props.onPrevMonth,
+      onNextYear: props.onNextYear,
+      onPrevYear: props.onPrevYear
     }
   },
   render () {
@@ -987,7 +995,11 @@ export default defineComponent({
       defaultTime: this.defaultTime,
       themeClass: this.themeClass,
       panel: this.panel,
-      onRender: this.onRender
+      onRender: this.onRender,
+      onNextMonth: this.onNextMonth,
+      onPrevMonth: this.onPrevMonth,
+      onNextYear: this.onNextYear,
+      onPrevYear: this.onPrevYear
     }
     const renderPanel = (): VNode => {
       const { type } = this

diff --git a/src/date-picker/src/panel/use-calendar.ts b/src/date-picker/src/panel/use-calendar.ts
@@ -367,15 +367,19 @@ function useCalendar (
   }
   function nextYear (): void {
     calendarValueRef.value = getTime(addYears(calendarValueRef.value, 1))
+    props.onNextYear?.()
   }
   function prevYear (): void {
     calendarValueRef.value = getTime(addYears(calendarValueRef.value, -1))
+    props.onPrevYear?.()
   }
   function nextMonth (): void {
     calendarValueRef.value = getTime(addMonths(calendarValueRef.value, 1))
+    props.onNextMonth?.()
   }
   function prevMonth (): void {
     calendarValueRef.value = getTime(addMonths(calendarValueRef.value, -1))
+    props.onPrevMonth?.()
   }
   // For month type
   function virtualListContainer (): HTMLElement | null {

diff --git a/src/date-picker/src/panel/use-panel-common.ts b/src/date-picker/src/panel/use-panel-common.ts
@@ -42,7 +42,11 @@ const usePanelCommonProps = {
   },
   themeClass: String,
   onRender: Function as PropType<(() => void) | undefined>,
-  panel: Boolean
+  panel: Boolean,
+  onNextMonth: Function as PropType<() => void>,
+  onPrevMonth: Function as PropType<() => void>,
+  onNextYear: Function as PropType<() => void>,
+  onPrevYear: Function as PropType<() => void>
 } as const
 
 type UsePanelCommonProps = ExtractPropTypes<typeof usePanelCommonProps>