feat(Calendar): add unselect event (#6198)

src/calendar/README.md

@@ -280,6 +280,7 @@ Following props are supported when the type is range
 | close `v2.5.2` | Triggered when close Popup | - |
 | opened `v2.5.2` | Triggered when opened Popup | - |
 | closed `v2.5.2` | Triggered when closed Popup | - |
+| unselect `v2.7.2` | Triggered when unselect date when type is multiple | _value: Date_ |
 
 ### Slots
 

src/calendar/README.zh-CN.md

@@ -278,12 +278,13 @@ export default {
 
 | 事件名 | 说明 | 回调参数 |
 | --- | --- | --- |
-| select | 点击任意日期时触发 | _value: Date \| Date[]_ |
+| select | 点击并选中任意日期时触发 | _value: Date \| Date[]_ |
 | confirm | 日期选择完成后触发，若`show-confirm`为`true`，则点击确认按钮后触发 | _value: Date \| Date[]_ |
 | open `v2.5.2` | 打开弹出层时触发 | - |
 | close `v2.5.2` | 关闭弹出层时触发 | - |
 | opened `v2.5.2` | 打开弹出层且动画结束后触发 | - |
 | closed `v2.5.2` | 关闭弹出层且动画结束后触发 | - |
+| unselect `v2.7.2` | 当 Canlendar 的 `type` 为 `multiple` 时，取消选中日期时触发 | _value: Date_ |
 
 ### Slots
 

src/calendar/index.js

@@ -4,6 +4,7 @@ import { getScrollTop } from '../utils/dom/scroll';
 import {
   t,
   bem,
+  copyDate,
   copyDates,
   getNextDay,
   compareDay,
@@ -290,7 +291,8 @@ export default createComponent({
         });
 
         if (selected) {
-          currentDate.splice(selectedIndex, 1);
+          const [unselectedDate] = currentDate.splice(selectedIndex, 1);
+          this.$emit('unselect', copyDate(unselectedDate));
         } else {
           this.select([...currentDate, date]);
         }

src/calendar/test/index.spec.js

@@ -87,6 +87,27 @@ test('select event when type is multiple', async () => {
   );
 });
 
+test('select event when type is multiple', async () => {
+  const wrapper = mount(Calendar, {
+    propsData: {
+      type: 'multiple',
+      minDate,
+      maxDate,
+      poppable: false,
+      defaultDate: [minDate],
+    },
+  });
+
+  await later();
+
+  const days = wrapper.findAll('.van-calendar__day');
+  days.at(15).trigger('click');
+  await later();
+  days.at(15).trigger('click');
+
+  expect(formatDate(wrapper.emitted('unselect')[0][0])).toEqual('2010/1/16');
+});
+
 test('should not trigger select event when click disabled day', async () => {
   const wrapper = mount(Calendar, {
     propsData: {

src/calendar/utils.ts

@@ -57,6 +57,10 @@ export function calcDateNum(date: [Date, Date]) {
   return (day2 - day1) / (1000 * 60 * 60 * 24) + 1;
 }
 
+export function copyDate(dates: Date) {
+  return new Date(dates);
+}
+
 export function copyDates(dates: Date | Date[]) {
   if (Array.isArray(dates)) {
     return dates.map((date) => {
@@ -64,9 +68,9 @@ export function copyDates(dates: Date | Date[]) {
         return date;
       }
 
-      return new Date(date);
+      return copyDate(date);
     });
   }
 
-  return new Date(dates);
+  return copyDate(dates);
 }