Feat(date picker) support month type

CHANGELOG.en-US.md

@@ -5,6 +5,9 @@
 ### Localization
 
 - Add ukUA locale.
+### Feats
+
+- `n-date-picker`'s `type` prop support `month` option.
 
 ### Fixes
 

CHANGELOG.zh-CN.md

@@ -5,6 +5,9 @@
 ### Localization
 
 - 新增 ukUA locale
+### Feats
+
+- `n-date-picker` 属性 `type` 支持 `month` 选项
 
 ### Fixes
 

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

@@ -9,6 +9,7 @@ date
 datetime
 daterange
 datetimerange
+month
 size
 disabled
 disabled-time
@@ -32,7 +33,7 @@ update-on-close
 | input-readonly | `boolean` | `false` | Set the `readonly` attribute of the input (avoids virtual keyboard on touch devices). |
 | shortcuts | `Record<string, number \| [number, number]>` | `undefined` | Shortcut button customizations. |
 | size | `'small' \| 'medium' \| 'large'` | `'medium'` | Date picker size. |
-| type | `'date' \| 'datetime' \| 'daterange' \|'datetimerange'` | `'date'` | Date picker type. |
+| type | `'date' \| 'datetime' \| 'daterange' \|'datetimerange' \|'month'` | `'date'` | Date picker type. |
 | value | `number \| [number, number] \| null` | `undefined` | Value of the date picker when being manually set. |
 | on-blur | `() => void` | `undefined` | On blur callback. |
 | on-focus | `() => void` | `undefined` | On focus callback. |

src/date-picker/demos/enUS/month.demo.md

@@ -0,0 +1,18 @@
+# Month
+
+```html
+<n-date-picker v-model:value="timestamp" type="month" clearable />
+<pre>{{ JSON.stringify(timestamp) }}</pre>
+```
+
+```js
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
+    return {
+      timestamp: ref(1183135260000)
+    }
+  }
+})
+```

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

@@ -9,6 +9,7 @@ date
 datetime
 daterange
 datetimerange
+month
 size
 disabled
 disabled-time
@@ -32,7 +33,7 @@ update-on-close
 | input-readonly | `boolean` | `false` | 设置输入框为只读（避免在移动设备上打开虚拟键盘） |
 | shortcuts | `Record<string, number \| [number, number]>` | `undefined` | 自定义快捷按钮 |
 | size | `'small' \| 'medium' \| 'large'` | `'medium'` | 尺寸 |
-| type | `'date' \| 'datetime' \| 'daterange' \|'datetimerange'` | `'date'` | Date Picker 的类型 |
+| type | `'date' \| 'datetime' \| 'daterange' \|'datetimerange' \|'month'` | `'date'` | Date Picker 的类型 |
 | value | `number \| [number, number] \| null` | `undefined` | Date Picker 的值 |
 | on-blur | `() => void` | `undefined` | 用户 blur 时执行的回调 |
 | on-focus | `() => void` | `undefined` | 用户 focus 时执行的回调 |

src/date-picker/demos/zhCN/month.demo.md

@@ -0,0 +1,18 @@
+# 月份
+
+```html
+<n-date-picker v-model:value="timestamp" type="month" clearable />
+<pre>{{ JSON.stringify(timestamp) }}</pre>
+```
+
+```js
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
+    return {
+      timestamp: ref(1183135260000)
+    }
+  }
+})
+```

src/date-picker/src/DatePicker.tsx

@@ -12,11 +12,12 @@ import {
   CSSProperties,
   toRef,
   Ref,
-  watchEffect
+  watchEffect,
+  nextTick
 } from 'vue'
 import { VBinder, VTarget, VFollower, FollowerPlacement } from 'vueuc'
 import { clickoutside } from 'vdirs'
-import { format, getTime, isValid } from 'date-fns'
+import { format, getTime, isValid, getYear } from 'date-fns'
 import { useIsMounted, useMergedState } from 'vooks'
 import { happensIn } from 'seemly'
 import { InputInst, InputProps, NInput } from '../../input'
@@ -37,6 +38,7 @@ import DatetimePanel from './panel/datetime'
 import DatetimerangePanel from './panel/datetimerange'
 import DatePanel from './panel/date'
 import DaterangePanel from './panel/daterange'
+import MonthPanel from './panel/month'
 import style from './styles/index.cssr'
 import { DatePickerTheme } from '../styles/light'
 import {
@@ -55,7 +57,8 @@ const DATE_FORMAT = {
   date: 'yyyy-MM-dd',
   datetime: 'yyyy-MM-dd HH:mm:ss',
   daterange: 'yyyy-MM-dd',
-  datetimerange: 'yyyy-MM-dd HH:mm:ss'
+  datetimerange: 'yyyy-MM-dd HH:mm:ss',
+  month: 'yyyy-MM'
 }
 
 const datePickerProps = {
@@ -89,7 +92,7 @@ const datePickerProps = {
   size: String as PropType<'small' | 'medium' | 'large'>,
   type: {
     type: String as PropType<
-    'date' | 'datetime' | 'daterange' | 'datetimerange'
+    'date' | 'datetime' | 'daterange' | 'datetimerange' | 'month'
     >,
     default: 'date'
   },
@@ -307,6 +310,24 @@ export default defineComponent({
         disableUpdateOnClose
       })
     }
+    function scrollTimer (): void {
+      if (!panelInstRef.value) return
+      const { monthScrollRef, yearScrollRef } = panelInstRef.value
+      if (monthScrollRef) {
+        const month = monthScrollRef.contentRef?.querySelector(
+          '[data-selected]'
+        ) as HTMLElement
+        if (month) {
+          monthScrollRef.scrollTo({ top: month.offsetTop })
+        }
+      }
+      if (yearScrollRef) {
+        if (mergedValueRef.value) {
+          const yearIndex = getYear(mergedValueRef.value as number) - 1900
+          yearScrollRef.scrollTo({ top: yearIndex * 40 })
+        }
+      }
+    }
     // --- Panel update value
     function handlePanelUpdateValue (
       value: Value | null,
@@ -448,6 +469,9 @@ export default defineComponent({
     function openCalendar (): void {
       if (mergedDisabledRef.value || mergedShowRef.value) return
       doUpdateShow(true)
+      if (props.type === 'month') {
+        void nextTick(scrollTimer)
+      }
     }
     function closeCalendar ({
       returnFocus,
@@ -586,6 +610,8 @@ export default defineComponent({
             itemSize,
             itemCellWidth,
             itemCellHeight,
+            itemMonthCellWidth,
+            itemMonthCellHeight,
             calendarTitlePadding,
             calendarTitleHeight,
             calendarDaysHeight,
@@ -639,6 +665,8 @@ export default defineComponent({
           '--item-size': itemSize,
           '--item-cell-width': itemCellWidth,
           '--item-cell-height': itemCellHeight,
+          '--item-month-cell-width': itemMonthCellWidth,
+          '--item-month-cell-height': itemMonthCellHeight,
           '--item-text-color': itemTextColor,
           '--item-color-included': itemColorIncluded,
           '--item-color-disabled': itemColorDisabled,
@@ -798,6 +826,8 @@ export default defineComponent({
                                   <DaterangePanel {...commonPanelProps} />
                               ) : this.type === 'datetimerange' ? (
                                   <DatetimerangePanel {...commonPanelProps} />
+                              ) : this.type === 'month' ? (
+                                  <MonthPanel {...commonPanelProps} />
                               ) : (
                                   <DatePanel {...commonPanelProps} />
                               ),

src/date-picker/src/interface.ts

@@ -1,5 +1,7 @@
 import { InjectionKey, Ref, Slots } from 'vue'
+import { VirtualListInst } from 'vueuc'
 import { NLocale, NDateLocale } from '../../locales'
+import { ScrollbarInst } from '../../scrollbar'
 import {
   IsHourDisabled,
   IsMinuteDisabled,
@@ -14,7 +16,9 @@ import {
 
 export type Value = number | [number, number]
 
-export type Shortcuts = Record<string, number> | Record<string, [number, number]>
+export type Shortcuts =
+  | Record<string, number>
+  | Record<string, [number, number]>
 
 export type OnUpdateValue = (
   value: number & (number | null) & [number, number] & ([number, number] | null)
@@ -39,6 +43,8 @@ export type OnClose = (disableUpdateOnClose: boolean) => void
 
 export interface PanelRef {
   $el: HTMLElement
+  monthScrollRef: ScrollbarInst | null
+  yearScrollRef: VirtualListInst | null
 }
 
 export type DatePickerInjection = {