feat: 添加 VanFieldDatePicker 组件

src/components/VanFieldCalendar/index.vue

@@ -35,6 +35,7 @@ const props = withDefaults(
     confirmText?: CalendarProps['confirmText']
     firstDayOfWeek?: CalendarProps['firstDayOfWeek']
     round?: CalendarProps['round']
+    // 自定义
     format?: string
     valueFormat?: string
   }>(),

src/components/VanFieldDatePicker/index.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import type { DatePickerProps, FieldProps, PopupProps } from 'vant'
+import { pick } from 'lodash-es'
+
+defineOptions({
+  name: 'VanFieldDatePicker',
+})
+
+const props = defineProps<{
+  // field
+  label?: FieldProps['label']
+  name?: FieldProps['name']
+  id?: FieldProps['id']
+  size?: FieldProps['size']
+  placeholder?: FieldProps['placeholder']
+  border?: FieldProps['border']
+  colon?: FieldProps['colon']
+  required?: FieldProps['required']
+  center?: FieldProps['center']
+  arrowDirection?: FieldProps['arrowDirection']
+  labelClass?: FieldProps['labelClass']
+  labelWidth?: FieldProps['labelWidth']
+  labelAlign?: FieldProps['labelAlign']
+  leftIcon?: FieldProps['leftIcon']
+  rightIcon?: FieldProps['rightIcon']
+  rules?: FieldProps['rules']
+  // popup
+  round?: PopupProps['round']
+  // date-picker
+  columnsType?: DatePickerProps['columnsType']
+  minDate?: DatePickerProps['minDate']
+  maxDate?: DatePickerProps['maxDate']
+  formatter?: DatePickerProps['formatter']
+}>()
+
+const fieldProps = computed(() => pick(props, ['label', 'name', 'id', 'size', 'placeholder', 'border', 'colon', 'required', 'center', 'arrowDirection', 'labelClass', 'labelWidth', 'labelAlign', 'leftIcon', 'rightIcon', 'rules']))
+const popupProps = computed(() => pick(props, ['round']))
+const datePickerProps = computed(() => pick(props, ['columnsType', 'minDate', 'maxDate', 'formatter']))
+
+const value = defineModel<string[]>()
+const valueDate = ref<string[]>(value.value ?? [])
+const valueStr = computed(() => {
+  return value.value ? value.value.join('-') : ''
+})
+
+const showPicker = ref(false)
+function onConfirm({ selectedValues }: { selectedValues: string[] }) {
+  value.value = selectedValues
+  showPicker.value = false
+}
+</script>
+
+<template>
+  <van-field :model-value="valueStr" v-bind="fieldProps" is-link readonly @click="showPicker = true" />
+  <van-popup v-model:show="showPicker" v-bind="popupProps" position="bottom" teleport="body">
+    <van-date-picker v-model="valueDate" v-bind="datePickerProps" @confirm="onConfirm" @cancel="showPicker = false" />
+  </van-popup>
+</template>

src/types/components.d.ts

@@ -25,6 +25,7 @@ declare module 'vue' {
     SvgIcon: typeof import('./../components/SvgIcon/index.vue')['default']
     Trend: typeof import('./../components/Trend/index.vue')['default']
     VanFieldCalendar: typeof import('./../components/VanFieldCalendar/index.vue')['default']
+    VanFieldDatePicker: typeof import('./../components/VanFieldDatePicker/index.vue')['default']
     VanFieldPicker: typeof import('./../components/VanFieldPicker/index.vue')['default']
   }
 }