✨ feat: 新增日历选择控件

+<!--
+ * @Date: 2022-09-14 11:00:01
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2022-09-14 14:24:41
+ * @FilePath: /data-table/src/components/CalendarField/index.vue
+ * @Description: 文件描述
+-->
+<template>
+  <div class="calendar-page">
+    <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="show = true" />
+    <van-calendar v-model:show="show"
+      :type="item.component_props.type" :max-range="item.component_props.maxRange"
+      :min-date="item.component_props.minDate" :max-date="item.component_props.maxDate"
+      :formatter="formatter"
+      first-day-of-week="1"
+      @month-show="onMonthShow"
+      @confirm="onConfirm" allow-same-day />
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  item: Object
+})
+
+const show = ref(false);
+
+const formatDate = (date) => `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
+const onConfirm = (value) => {
+  console.warn(props.item.component_props.type);
+  show.value = false;
+  if (props.item.component_props.type === 'range') { // 日期区间
+    const [start, end] = value;
+    props.item.value = `${formatDate(start)} ~ ${formatDate(end)}`;
+  } else if (props.item.component_props.type === 'multiple') { // 多个日期
+    const arr = []
+    value.forEach(element => {
+      arr.push(formatDate(element))
+    });
+    props.item.value = arr.join(',');
+  } else {
+    props.item.value = formatDate(value);
+  }
+};
+
+// 每一格内容格式化
+const formatter = (day) => {
+  const month = day.date.getMonth() + 1;
+  const date = day.date.getDate();
+  const year = day.date.getFullYear();
+
+  if (month === 5) {
+    if (date === 1) {
+      day.topInfo = '劳动节';
+    } else if (date === 4) {
+      day.topInfo = '青年节';
+    } else if (date === 11) {
+      day.text = '今天';
+    }
+  }
+
+  if (month === 10) {
+    if (date === 1) {
+      day.topInfo = '国庆节';
+      day.type = 'disabled'
+    }
+  }
+
+  if (day.type === 'start') {
+    day.bottomInfo = '开始';
+  } else if (day.type === 'end') {
+    day.bottomInfo = '结束';
+  }
+
+  return day;
+};
+
+const onMonthShow = ({ date, title }) => {
+  // console.warn(date);
+  // console.warn(title);
+  if (title === '2022年12月') {
+  }
+}
+
+</script>
+
+<style lang="less" scoped>
+.calendar-page {
+  .label {
+    padding: 1rem 1rem 0 1rem;
+    font-size: 0.9rem;
+    font-weight: bold;
+
+    span {
+      color: red;
+    }
+  }
+}
+</style>

@@ -14,6 +14,7 @@ import PhoneField from '@/components/PhoneField/index.vue'
 import EmailField from '@/components/EmailField/index.vue'
 import SignField from '@/components/SignField/index.vue'
 import RatePickerField from '@/components/RatePickerField/index.vue'
+import CalendarField from '@/components/CalendarField/index.vue'
 
 /**
  * 生成自定义组件类型
@@ -32,6 +33,7 @@ import RatePickerField from '@/components/RatePickerField/index.vue'
  * @type email 邮箱输入框 EmailField
  * @type sign 电子签名输入框 SignField
  * @type rate_picker 评分选择器 RatePickerField
+ * @type calendar 日历选择器 CalendarField
  */
 export function createComponentType(data) {
   // 判断类型和使用组件
@@ -97,5 +99,9 @@ export function createComponentType(data) {
       item.name = item.key;
       item.component = RatePickerField;
     }
+    if (item.component_props.name === 'calendar') {
+      item.name = item.key;
+      item.component = CalendarField;
+    }
   })
 }

@@ -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 15:47:18
+ * @LastEditTime: 2022-09-14 11:05:31
  * @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, PickerGroup, Rate } 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, Rate, Calendar } 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).use(PickerGroup).use(Rate);
+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).use(Rate).use(Calendar);
 app.use(vueEsign)
 app.mount('#app');

 <!--
  * @Date: 2022-07-18 10:22:22
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-09-13 17:46:30
+ * @LastEditTime: 2022-09-14 14:38:05
  * @FilePath: /data-table/src/views/index.vue
  * @Description: 首页
 -->
@@ -46,19 +46,34 @@ onMounted(() => {
   //   },
   //   required: true,
   // },
+  // {
+  //   key: 'username',
+  //   value: 'test',
+  //   label: '用户名',
+  //   placeholder: '请输入用户名',
+  //   component: '',
+  //   component_props: {
+  //     name: 'text',
+  //     // readonly: true,
+  //     // disabled: true,
+  //     // align: 'left',
+  //   },
+  //   required: true,
+  // },
   {
-    key: 'username',
-    value: 'test',
-    label: '用户名',
-    placeholder: '请输入用户名',
+    key: 'date',
+    value: '',
+    label: '日历选择',
+    placeholder: '请选择日历日期',
     component: '',
     component_props: {
-      name: 'text',
-      // readonly: true,
-      // disabled: true,
-      // align: 'left',
+      name: 'calendar',
+      type: 'range', // 日期区间 ['multiple', 'range']
+      minDate: new Date(2022, 0, 1), // 最小日期
+      maxDate: new Date(2023, 0, 31), // 最大日期
+      maxRange: 5, // 最大可选天数
     },
-    required: true,
+    required: false,
   },
   // {
   //   key: 'email',