✨ feat: 新增日期时间选择控件

+<!--
+ * @Date: 2022-09-08 15:02:45
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2022-09-08 15:18:22
+ * @FilePath: /data-table/src/components/DateTimePickerField/index.vue
+ * @Description: 文件描述
+-->
+<template>
+  <div class="datetime-picker">
+    <div class="label">{{ item.label }}<span v-if="item.required">&nbsp;*</span></div>
+    <van-field v-model="item.value" is-link readonly :name="item.key" :required="item.required"
+      :placeholder="item.placeholder" :rules="item.rules" @click="showPicker = true" />
+    <van-popup v-model:show="showPicker" position="bottom">
+      <van-picker-group :title="item.component_props.title" :tabs="['选择日期', '选择时间']" @confirm="onConfirm"
+        @cancel="onCancel">
+        <van-date-picker v-model="currentDate" :min-date="item.component_props.minDate" />
+        <van-time-picker v-model="currentTime" />
+      </van-picker-group>
+    </van-popup>
+  </div>
+</template>
+
+<script setup>
+import { showToast } from 'vant';
+import dayjs from 'dayjs';
+
+const props = defineProps({
+  item: Object
+})
+const showPicker = ref(false);
+
+const currentDate = ref([]);
+const currentTime = ref([]);
+
+const onConfirm = () => {
+  props.item.value = `${currentDate.value.join('-')} ${currentTime.value.join(':')}`;
+  showPicker.value = false;
+};
+const onCancel = () => {
+  showPicker.value = false;
+};
+
+onMounted(() => {
+  // 获取值定位显示
+  const datetime = props.item.value.split(' ');
+  currentDate.value = datetime[0]?.split('-');
+  currentTime.value = datetime[1]?.split(':');
+})
+</script>
+
+<style lang="less" scoped>
+.datetime-picker {
+.label {
+  padding: 1rem 1rem 0 1rem;
+  font-size: 0.9rem;
+  font-weight: bold;
+
+  span {
+    color: red;
+  }
+}
+}
+</style>

@@ -8,6 +8,7 @@ import PickerField from '@/components/PickerField/index.vue'
 import AreaPickerField from '@/components/AreaPickerField/index.vue'
 import DatePickerField from '@/components/DatePickerField/index.vue'
 import TimePickerField from '@/components/TimePickerField/index.vue'
+import DateTimePickerField from '@/components/DateTimePickerField/index.vue'
 import ImageUploaderField from '@/components/ImageUploaderField/index.vue'
 import PhoneField from '@/components/PhoneField/index.vue'
 import EmailField from '@/components/EmailField/index.vue'
@@ -24,6 +25,7 @@ import SignField from '@/components/SignField/index.vue'
  * @type area_picker 地址选择器 AreaPickerField
  * @type date_picker 日期选择器 DatePickerField
  * @type time_picker 时间选择器 TimePickerField
+ * @type datetime_picker 日期时间选择器 DateTimePickerField
  * @type image_uploader 图片上传 ImageUploaderField
  * @type phone 手机输入框 PhoneField
  * @type email 邮箱输入框 EmailField
@@ -71,6 +73,9 @@ export function createComponentType(data) {
     if (item.component_props.name === 'time_picker') {
       item.component = TimePickerField;
     }
+    if (item.component_props.name === 'datetime_picker') {
+      item.component = DateTimePickerField;
+    }
     if (item.component_props.name === 'image_uploader') {
       item.component = ImageUploaderField;
     }

@@ -2,12 +2,12 @@
  * @Author: hookehuyr hookehuyr@gmail.com
  * @Date: 2022-05-31 12:06:19
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-09-08 10:05:14
+ * @LastEditTime: 2022-09-08 15:06:26
  * @FilePath: /data-table/src/main.js
  * @Description:
  */
 import { createApp } from 'vue';
-import { Button, Image as VanImage, Col, Row, Icon, Form, Field, CellGroup, ConfigProvider, Toast, Uploader, Empty, Tab, Tabs, Overlay, NumberKeyboard, Lazyload, List, PullRefresh, Popup, Picker, Sticky, Stepper, Tag, Swipe, SwipeItem, Dialog, ActionSheet, Loading, Checkbox, Search, NavBar, Collapse, CollapseItem, RadioGroup, Radio, CheckboxGroup, Area, DatePicker, TimePicker } from 'vant';
+import { Button, Image as VanImage, Col, Row, Icon, Form, Field, CellGroup, ConfigProvider, Toast, Uploader, Empty, Tab, Tabs, Overlay, NumberKeyboard, Lazyload, List, PullRefresh, Popup, Picker, Sticky, Stepper, Tag, Swipe, SwipeItem, Dialog, ActionSheet, Loading, Checkbox, Search, NavBar, Collapse, CollapseItem, RadioGroup, Radio, CheckboxGroup, Area, DatePicker, TimePicker, PickerGroup } from 'vant';
 import router from './router';
 import App from './App.vue';
 // import axios from './utils/axios';
@@ -25,6 +25,6 @@ app.config.warnHandler = () => null;
 
 app.config.globalProperties.$http = axios; // 关键语句
 
-app.use(pinia).use(router).use(Button).use(VanImage).use(Col).use(Row).use(Icon).use(Form).use(Field).use(CellGroup).use(Toast).use(Uploader).use(Empty).use(Tab).use(Tabs).use(Overlay).use(NumberKeyboard).use(Lazyload).use(List).use(PullRefresh).use(Popup).use(Picker).use(Sticky).use(Stepper).use(Tag).use(Swipe).use(SwipeItem).use(Dialog).use(ActionSheet).use(Loading).use(Checkbox).use(Search).use(ConfigProvider).use(NavBar).use(Collapse).use(CollapseItem).use(Radio).use(RadioGroup).use(CheckboxGroup).use(Area).use(DatePicker).use(TimePicker);
+app.use(pinia).use(router).use(Button).use(VanImage).use(Col).use(Row).use(Icon).use(Form).use(Field).use(CellGroup).use(Toast).use(Uploader).use(Empty).use(Tab).use(Tabs).use(Overlay).use(NumberKeyboard).use(Lazyload).use(List).use(PullRefresh).use(Popup).use(Picker).use(Sticky).use(Stepper).use(Tag).use(Swipe).use(SwipeItem).use(Dialog).use(ActionSheet).use(Loading).use(Checkbox).use(Search).use(ConfigProvider).use(NavBar).use(Collapse).use(CollapseItem).use(Radio).use(RadioGroup).use(CheckboxGroup).use(Area).use(DatePicker).use(TimePicker).use(PickerGroup);
 app.use(vueEsign)
 app.mount('#app');

 <!--
  * @Date: 2022-07-18 10:22:22
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-09-08 14:31:33
+ * @LastEditTime: 2022-09-08 15:22:09
  * @FilePath: /data-table/src/views/index.vue
  * @Description: 首页
 -->
@@ -172,7 +172,7 @@ onMounted(() => {
   //   },
   // },
   // {
-  //   key: 'datetime',
+  //   key: 'date',
   //   value: '2022-10',
   //   label: '日期选择',
   //   placeholder: '请选择日期',
@@ -205,6 +205,18 @@ onMounted(() => {
   //     multiple: false
   //   }
   // }
+  {
+    key: 'datetime',
+    value: '2022-06-01 12:00',
+    label: '日期时间',
+    placeholder: '请选择日期时间',
+    component_props: {
+      name: 'datetime_picker',
+      title: '请选择',
+      minDate: new Date(),
+    },
+    required: true,
+  }
   ];
   // 生成自定义组件
   createComponentType(mockData.value)