feat: 日期选择添加multiple支持

Author: TangSY

src/calendar/Calendar.tsx

@@ -777,7 +777,7 @@ export default defineComponent({
               }}
             >
               {props.pickerType !== 'time' ? renderCalendar() : ''}
-              {renderTimePicker()}
+              {props.selectType === 'single' && renderTimePicker()}
               {props.changeYearFast ? renderYearMonthPicker() : ''}
             </div>
             {renderCtrlImg()}

src/calendar/CalendarDate.tsx

@@ -419,8 +419,7 @@ export default defineComponent({
       const day = new Date().getDate();
 
       if (props.selectType === 'single') {
-        const date = checkedDate.value[0];
-        checkedDate.value = [{ ...date, day }];
+        checkedDate.value = [{ year, month, day }];
       }
 
       currentYearMonth.value = { year, month };
@@ -488,16 +487,31 @@ export default defineComponent({
       calculateCalendarOfThreeMonth();
     };
 
+    const dealCheckedDate = (date: CalendarMonthType) => {
+      const { selectType } = props;
+      const { year, month, day } = date;
+      if (selectType === 'single') {
+        checkedDate.value = [{ year, month, day }];
+      } else if (selectType === 'multiple') {
+        const existIndex = checkedDate.value.findIndex(
+          (item) =>
+            item.year === year && item.month === month && item.day === day
+        );
+        if (existIndex > -1) {
+          checkedDate.value.splice(existIndex, 1);
+        } else {
+          checkedDate.value = [...checkedDate.value, date];
+        }
+      }
+    };
+
     // 点击日历上的日期
     const clickCalendarDay = (date: CalendarMonthType) => {
-      const { year, month, day } = date;
-      if (!day) return;
+      if (!date.day) return;
 
       if (formatDisabledDate(date)) return;
 
-      if (props.selectType === 'single') {
-        checkedDate.value = [{ year, month, day }];
-      }
+      dealCheckedDate(date);
 
       if (date.month === lastMonth.value && date.year === lastMonthYear.value) {
         getLastMonth();

src/select-type/README.md

@@ -0,0 +1,35 @@
+# picker-type
+
+### 介绍
+
+选择器类型
+
+single：单选
+
+range：范围选择
+
+multiple：多选
+
+### single
+
+```html
+<template>
+  <vue-hash-calendar select-type="single" />
+</template>
+```
+
+### range
+
+```html
+<template>
+  <vue-hash-calendar select-type="range" />
+</template>
+```
+
+### multiple
+
+```html
+<template>
+  <vue-hash-calendar select-type="multiple" />
+</template>
+```

src/select-type/demo/index.vue

@@ -0,0 +1,23 @@
+<template>
+  <h1 class="hash-demo-title">single</h1>
+  <vue-hash-calendar
+    :default-datetime="new Date(2022, 0, 1, 1, 1)"
+    select-type="single"
+  />
+
+  <h1 class="hash-demo-title">range</h1>
+  <vue-hash-calendar
+    :default-datetime="new Date(2022, 0, 1, 1, 1)"
+    select-type="range"
+  />
+
+  <h1 class="hash-demo-title">multiple</h1>
+  <vue-hash-calendar
+    :default-datetime="new Date(2022, 0, 1, 1, 1)"
+    select-type="multiple"
+  />
+</template>
+
+<script setup>
+import VueHashCalendar from '../../calendar';
+</script>