feat: ✨ date-time-picker-view 添加年选择 (#241)

* feat: date-time-picker-view添加年选择

* feat: date-time-picker添加年选择

* docs: datetime-picker文档添加年选择器

* docs: datetime-picker补充year类型示例代码

* fix: 🐛 修复datetime-picker-view type=year时getSelects返回object的问题

* chore: 修改代码格式

* refactor: ♻️  优化重复的代码逻辑

reslove #241

docs/component/datetime-picker-view.md

@@ -43,6 +43,17 @@ const value = ref<number>(Date.now())
 const value = ref<number>(Date.now())
 ```
 
+## year 类型
+
+`year` 类型只展示年月。
+
+```html
+<wd-datetime-picker-view type="year" v-model="value" label="年" />
+```
+```typescript
+const value = ref<number>(Date.now())
+```
+
 ## time 类型
 
 `time` 类型只展示时分，绑定值为 `HH:mm` 格式。
@@ -110,7 +121,7 @@ const filter = (type, values) => {
 | 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
 |-----|------|-----|-------|-------|---------|
 | v-model | 选中项，当 type 为 time 时，类型为字符串，否则为 Date | string / date | - | - |
-| type | 选择器类型 | string | date / year-month / time | datetime | - |
+| type | 选择器类型 | string | date / year-month / time / year | datetime | - |
 | loading | 加载中 | boolean | - | false | - |
 | loading-color | 加载的颜色，只能使用十六进制的色值写法，且不能使用缩写 | string | - | #4D80F0 | - |
 | columns-height | picker内部滚筒高 | number | - | 231 | - |

docs/component/datetime-picker.md

@@ -58,6 +58,17 @@ const value = ref<number>(Date.now())
 const value = ref<number>(Date.now())
 ```
 
+## year 类型
+
+`year` 类型只展示年。
+
+```html
+<wd-datetime-picker type="year" v-model="value" label="年" />
+```
+```typescript
+const value = ref<number>(Date.now())
+```
+
 ## time 类型
 
 `time` 类型只展示时分，绑定值为 `HH:mm` 格式。
@@ -250,7 +261,7 @@ const displayFormatTabLabel = (items) => {
 |-----|------|-----|-------|-------|---------|
 | v-model | 选中项，当 type 为 time 时，类型为字符串；当 type 为 Array 时，类型为范围选择；否则为 Date | string / date / array | - | - | - |
 | default-value | 默认日期，类型保持与 value 一致，打开面板时面板自动选到默认日期 | string / date / array | - | - | - |
-| type | 选择器类型 | string | date / year-month / time | datetime | - |
+| type | 选择器类型 | string | date / year-month / time / year | datetime | - |
 | loading | 加载中 | boolean | - | false | - |
 | loading-color | 加载的颜色，只能使用十六进制的色值写法，且不能使用缩写 | string | - | #4D80F0 | - |
 | columns-height | picker内部滚筒高 | number | - | 231 | - |

src/pages/datetimePicker/Index.vue

@@ -6,6 +6,7 @@
         <wd-datetime-picker label="日期选择" v-model="value1" @confirm="handleConfirm1" />
         <wd-datetime-picker label="年月日" v-model="value2" type="date" @confirm="handleConfirm2" />
         <wd-datetime-picker label="年月" v-model="value3" type="year-month" @confirm="handleConfirm3" />
+        <wd-datetime-picker label="年" v-model="value16" type="year" @confirm="handleConfirm16" />
         <wd-datetime-picker label="时分" v-model="value4" type="time" @confirm="handleConfirm4" />
         <wd-datetime-picker label="展示格式" v-model="value5" :display-format="displayFormat" @confirm="handleConfirm5" />
         <wd-datetime-picker label="内部格式" v-model="value6" :formatter="formatter" @confirm="handleConfirm6" />
@@ -63,6 +64,7 @@ const value12 = ref<string>('')
 const value13 = ref<number>(Date.now())
 const value14 = ref<any[]>(['', ''])
 const value15 = ref<any[]>(['', Date.now()])
+const value16 = ref(Date.now())
 const defaultValue = ref<any[]>([Date.now() - 24 * 60 * 60 * 1000, Date.now()])
 const showstart = ref<boolean>(false)
 const formatter: DatetimePickerViewFormatter = (type, value) => {
@@ -154,6 +156,9 @@ function handleConfirm14({ value }: any) {
 function handleConfirm15({ value }: any) {
   console.log(value)
 }
+function handleConfirm16({ value }: any) {
+  console.log(value)
+}
 /** picker触发cancel事件，同步触发cancel事件 */
 function onCancel() {}
 </script>

src/pages/datetimePickerView/Index.vue

@@ -13,6 +13,10 @@
       <wd-datetime-picker-view type="year-month" v-model="value3" @change="onChange3" />
     </demo-block>
 
+    <demo-block title="年" transparent>
+      <wd-datetime-picker-view type="year" v-model="value7" @change="onChange7" />
+    </demo-block>
+
     <demo-block title="时分" transparent>
       <wd-datetime-picker-view type="time" v-model="value4" @change="onChange4" />
     </demo-block>
@@ -37,6 +41,7 @@ const value3 = ref<number>(Date.now())
 const value4 = ref<string>('11:12')
 const value5 = ref<number>(Date.now())
 const value6 = ref<number>(Date.now())
+const value7 = ref<string>('')
 const formatter: DatetimePickerViewFormatter = (type, value) => {
   switch (type) {
     case 'year':
@@ -80,5 +85,8 @@ function onChange5({ value }: any) {
 function onChange6({ value }: any) {
   console.log(value)
 }
+function onChange7({ value }: any) {
+  console.log(new Date(value).getFullYear())
+}
 </script>
 <style lang="scss" scoped></style>

src/uni_modules/wot-design-uni/components/wd-datetime-picker-view/types.ts

@@ -1,7 +1,7 @@
 import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
 import { baseProps, makeBooleanProp, makeNumberProp, makeRequiredProp, makeStringProp } from '../common/props'
 
-export type DateTimeType = 'date' | 'year-month' | 'time' | 'datetime'
+export type DateTimeType = 'date' | 'year-month' | 'time' | 'datetime' | 'year'
 
 /**
  * @description 根据传入的值和类型，获取当前的选项数组，便于传入 pickerView

src/uni_modules/wot-design-uni/components/wd-datetime-picker-view/wd-datetime-picker-view.vue

@@ -27,7 +27,7 @@ export default {
 
 <script lang="ts" setup>
 import { getCurrentInstance, onBeforeMount, ref, watch } from 'vue'
-import { debounce, isFunction, isDef, padZero, range } from '../common/util'
+import { debounce, isFunction, isDef, padZero, range, isArray } from '../common/util'
 import {
   getPickerValue,
   datetimePickerViewProps,
@@ -119,7 +119,7 @@ watch(
 watch(
   () => props.type,
   (target) => {
-    const type = ['date', 'year-month', 'time', 'datetime']
+    const type = ['date', 'year-month', 'time', 'datetime', 'year']
     if (type.indexOf(target) === -1) {
       console.error(`type must be one of ${type}`)
     }
@@ -299,6 +299,7 @@ function getRanges(): Array<{ type: DatetimePickerViewColumnType; range: number[
 
   if (props.type === 'date') result.splice(3, 2)
   if (props.type === 'year-month') result.splice(2, 3)
+  if (props.type === 'year') result.splice(1, 4)
   return result
 }
 
@@ -400,9 +401,10 @@ function updateColumnValue(value: string | number) {
  */
 function updateInnerValue() {
   const { type } = props
-  let values: Array<string> = []
   let innerValue: string | number = ''
-  values = datePickerview.value!.getValues() as string[]
+  const pickerVal = datePickerview.value?.getValues() || []
+  const values = isArray(pickerVal) ? pickerVal : [pickerVal]
+
   if (type === 'time') {
     innerValue = `${padZero(values[0])}:${padZero(values[1])}`
     return innerValue
@@ -412,13 +414,13 @@ function updateInnerValue() {
   const year = values[0] && parseInt(values[0])
 
   // 处理月 索引位1
-  const month = values[1] && parseInt(values[1])
+  const month = type === 'year' ? 1 : values[1] && parseInt(values[1])
 
   const maxDate = getMonthEndDay(Number(year), Number(month))
 
   // 处理 date 日期 索引位2
   let date: string | number = 1
-  if (type !== 'year-month') {
+  if (type !== 'year-month' && type !== 'year') {
     date = (Number(values[2]) && parseInt(String(values[2]))) > maxDate ? maxDate : values[2] && parseInt(String(values[2]))
   }
 
@@ -440,8 +442,8 @@ function updateInnerValue() {
  * @description 选中项改变，多级联动
  */
 function columnChange(picker: PickerViewInstance) {
-  // time 和 year-mouth 无需联动
-  if (props.type === 'time' || props.type === 'year-month') {
+  // time year-mouth year 无需联动
+  if (props.type === 'time' || props.type === 'year-month' || props.type === 'year') {
     return
   }
   /** 重新计算年月日时分秒，修正时间。 */
@@ -470,7 +472,7 @@ function columnChange(picker: PickerViewInstance) {
    * 选中月，会修改月份对应的日数
    */
 
-  newColumns.forEach((columns, index) => {
+  newColumns.forEach((_columns, index) => {
     const nextColumnIndex = index + 1
     const nextColumnData = newColumns[nextColumnIndex]
     // `日`不控制任何其它列
@@ -490,7 +492,10 @@ function onPickEnd() {
 }
 
 function getSelects() {
-  return datePickerview.value && datePickerview.value.getSelects ? datePickerview.value.getSelects() : undefined
+  const pickerVal = datePickerview.value?.getSelects()
+  if (pickerVal == null) return undefined
+  if (isArray(pickerVal)) return pickerVal
+  return [pickerVal]
 }
 </script>
 

src/uni_modules/wot-design-uni/components/wd-datetime-picker/wd-datetime-picker.vue

@@ -621,6 +621,7 @@ function defaultDisplayFormat(items: Record<string, any>[], tabLabel: boolean =
      * 但使用模拟nextTick会造成页面延迟展示问题，对用户感知来讲不友好，因此不适用该方法
      */
     const typeMaps = {
+      year: ['year'],
       datetime: ['year', 'month', 'date', 'hour', 'minute'],
       date: ['year', 'month', 'date'],
       time: ['hour', 'minute'],
@@ -634,6 +635,8 @@ function defaultDisplayFormat(items: Record<string, any>[], tabLabel: boolean =
   }
 
   switch (props.type) {
+    case 'year':
+      return items[0].label
     case 'date':
       return `${items[0].label}-${items[1].label}-${items[2].label}`
     case 'year-month':