From 762b92aed686100e105888dd158488cc74332dc8 Mon Sep 17 00:00:00 2001
From: Hooray Hu <304327508@qq.com>
Date: Tue, 13 Aug 2024 18:15:29 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=20VanFieldDatePicker?=
 =?UTF-8?q?=20=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/VanFieldCalendar/index.vue   |  1 +
 src/components/VanFieldDatePicker/index.vue | 58 +++++++++++++++++++++
 src/types/components.d.ts                   |  1 +
 3 files changed, 60 insertions(+)
 create mode 100644 src/components/VanFieldDatePicker/index.vue

diff --git a/src/components/VanFieldCalendar/index.vue b/src/components/VanFieldCalendar/index.vue
index 0d864ee..30434c8 100644
--- a/src/components/VanFieldCalendar/index.vue
+++ b/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
   }>(),
diff --git a/src/components/VanFieldDatePicker/index.vue b/src/components/VanFieldDatePicker/index.vue
new file mode 100644
index 0000000..9673cf1
--- /dev/null
+++ b/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>
diff --git a/src/types/components.d.ts b/src/types/components.d.ts
index d4e2f7f..cb78aa8 100644
--- a/src/types/components.d.ts
+++ b/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']
   }
 }