feat(Calendar): add allow-same-day prop (#5688)

src/calendar/README.md

@@ -273,6 +273,7 @@ Following props are supported when the type is range
 |------|------|------|------|
 | max-range `v2.4.3` | Number of selectable days | *number \| string* | - |
 | range-prompt `v2.4.3` | Error message when exceeded max range | *string* | `Choose no more than xx days` |
+| allow-same-day `v2.5.6` | Whether the start and end time of the range is allowed on the same day | *boolean* | `fasle` |
 
 ### Data Structure of Day
 

src/calendar/README.zh-CN.md

@@ -275,6 +275,7 @@ export default {
 |------|------|------|------|
 | max-range `v2.4.3` | 日期区间最多可选天数，默认无限制 | *number \| string* | - |
 | range-prompt `v2.4.3` | 范围选择超过最多可选天数时的提示文案 | *string* | `选择天数不能超过 xx 天` |
+| allow-same-day `v2.5.6` | 是否允许日期范围的起止时间为同一天 | *boolean* | `fasle` |
 
 ### Day 数据结构
 

src/calendar/components/Month.js

@@ -23,6 +23,7 @@ export default createComponent({
     rowHeight: [Number, String],
     formatter: Function,
     currentDate: [Date, Array],
+    allowSameDay: Boolean,
     showSubtitle: Boolean,
     showMonthTitle: Boolean,
   },
@@ -125,19 +126,25 @@ export default createComponent({
       const [startDay, endDay] = this.currentDate;
 
       if (!startDay) {
-        return;
+        return '';
       }
 
       const compareToStart = compareDay(day, startDay);
+
+      if (!endDay) {
+        return compareToStart === 0 ? 'start' : '';
+      }
+
+      const compareToEnd = compareDay(day, endDay);
+
+      if (compareToStart === 0 && compareToEnd === 0 && this.allowSameDay) {
+        return 'start-end';
+      }
+
       if (compareToStart === 0) {
         return 'start';
       }
 
-      if (!endDay) {
-        return;
-      }
-
-      const compareToEnd = compareDay(day, endDay);
       if (compareToEnd === 0) {
         return 'end';
       }
@@ -170,11 +177,11 @@ export default createComponent({
 
     getBottomInfo(type) {
       if (this.type === 'range') {
-        if (type === 'start') {
+        if (type === 'start' || type === 'end') {
-          return t('start');
+          return t(type);
         }
-        if (type === 'end') {
+        if (type === 'start-end') {
-          return t('end');
+          return t('startEnd');
         }
       }
     },
@@ -254,7 +261,7 @@ export default createComponent({
             role="gridcell"
             style={style}
             class={[bem('day'), item.className]}
-            tabindex={disabled ? null : -1}
+            tabindex={-1}
             onClick={onClick}
           >
             <div class={bem('selected-day')} style={{ background: this.color }}>

src/calendar/index.js

@@ -30,6 +30,7 @@ export default createComponent({
     rangePrompt: String,
     defaultDate: [Date, Array],
     getContainer: [String, Function],
+    allowSameDay: Boolean,
     closeOnPopstate: Boolean,
     confirmDisabledText: String,
     type: {
@@ -261,6 +262,8 @@ export default createComponent({
             this.select([startDay, date], true);
           } else if (compareToStart === -1) {
             this.select([date, null]);
+          } else if (this.allowSameDay) {
+            this.select([date, date]);
           }
         } else {
           this.select([date, null]);
@@ -342,6 +345,7 @@ export default createComponent({
           rowHeight={this.rowHeight}
           currentDate={this.currentDate}
           showSubtitle={this.showSubtitle}
+          allowSameDay={this.allowSameDay}
           showMonthTitle={showMonthTitle}
           onClick={this.onClickDay}
         />

src/calendar/index.less

@@ -100,6 +100,7 @@
 
     &--end,
     &--start,
+    &--start-end,
     &--multiple-middle,
     &--multiple-selected {
       color: @calendar-range-edge-color;
@@ -114,6 +115,7 @@
       border-radius: 0 @border-radius-md @border-radius-md 0;
     }
 
+    &--start-end,
     &--multiple-selected {
       border-radius: @border-radius-md;
     }

src/calendar/test/index.spec.js

@@ -82,6 +82,7 @@ test('select event when type is multiple', async () => {
   const days = wrapper.findAll('.van-calendar__day');
   days.at(15).trigger('click');
   days.at(16).trigger('click');
+  days.at(17).trigger('click');
 
   await later();
   days.at(15).trigger('click');
@@ -93,7 +94,10 @@ test('select event when type is multiple', async () => {
     '2010/1/10,2010/1/16,2010/1/17'
   );
   expect(formatMultiple(emittedSelect[2][0])).toEqual(
-    '2010/1/10,2010/1/17,2010/1/13'
+    '2010/1/10,2010/1/16,2010/1/17,2010/1/18'
+  );
+  expect(formatMultiple(emittedSelect[3][0])).toEqual(
+    '2010/1/10,2010/1/17,2010/1/18,2010/1/13'
   );
 });
 

src/calendar/test/prop.spec.js

@@ -64,3 +64,33 @@ test('hide close icon when there is no title', () => {
   });
   expect(wrapper.contains('.van-popup__close-icon')).toBeFalsy();
 });
+
+test('allow-same-day prop', async () => {
+  const select = jest.fn();
+  const wrapper = mount(Calendar, {
+    propsData: {
+      type: 'range',
+      minDate,
+      maxDate,
+      poppable: false,
+    },
+    listeners: {
+      select,
+    },
+  });
+
+  await later();
+
+  const days = wrapper.findAll('.van-calendar__day');
+  days.at(9).trigger('click');
+  days.at(9).trigger('click');
+
+  expect(select).toHaveBeenLastCalledWith([minDate, null]);
+
+  wrapper.setProps({
+    allowSameDay: true,
+  });
+
+  days.at(9).trigger('click');
+  expect(select).toHaveBeenLastCalledWith([minDate, minDate]);
+});

src/locale/lang/en-US.ts

@@ -16,6 +16,7 @@ export default {
     end: 'End',
     start: 'Start',
     title: 'Calendar',
+    startEnd: 'Start/End',
     weekdays: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
     monthTitle: (year: number, month: number) => `${year}/${month}`,
     rangePrompt: (maxRange: number) => `Choose no more than ${maxRange} days`,

src/locale/lang/es-ES.ts

@@ -14,8 +14,9 @@ export default {
   telInvalid: 'Teléfono inválido',
   vanCalendar: {
     end: 'Fin',
-    start: 'Comienzo',
+    start: 'Inicio',
     title: 'Calendario',
+    startEnd: 'Inicio/Fin',
     weekdays: ['Dom', 'Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb'],
     monthTitle: (year: number, month: number) => `${year}/${month}`,
     rangePrompt: (maxRange: number) => `Elija no más de ${maxRange} días`,

src/locale/lang/tr-TR.ts

@@ -16,6 +16,7 @@ export default {
     end: 'Son',
     start: 'Başlat',
     title: 'Takvim',
+    startEnd: 'Başlat/Son',
     weekdays: ['Paz', 'Pzt', 'Sal', 'Çar', 'Per', 'Cum', 'Cmt'],
     monthTitle: (year: number, month: number) => `${year}/${month}`,
     rangePrompt: (maxRange: number) => `En fazla ${maxRange} gün seçin`,

src/locale/lang/zh-CN.ts

@@ -17,6 +17,7 @@ export default {
     start: '开始',
     title: '日期选择',
     confirm: '确定',
+    startEnd: '开始/结束',
     weekdays: ['日', '一', '二', '三', '四', '五', '六'],
     monthTitle: (year: number, month: number) => `${year}年${month}月`,
     rangePrompt: (maxRange: number) => `选择天数不能超过 ${maxRange} 天`,

src/locale/lang/zh-HK.ts

@@ -17,6 +17,7 @@ export default {
     start: '開始',
     title: '日期選擇',
     confirm: '確定',
+    startEnd: '開始/結束',
     weekdays: ['日', '壹', '二', '三', '四', '五', '六'],
     monthTitle: (year: number, month: number) => `${year}年${month}月`,
     rangePrompt: (maxRange: number) => `選擇天數不能超過 ${maxRange} 天`,

src/locale/lang/zh-TW.ts

@@ -17,6 +17,7 @@ export default {
     start: '開始',
     title: '日期選擇',
     confirm: '確定',
+    startEnd: '開始/結束',
     weekdays: ['日', '壹', '二', '三', '四', '五', '六'],
     monthTitle: (year: number, month: number) => `${year}年${month}月`,
     rangePrompt: (maxRange: number) => `選擇天數不能超過 ${maxRange} 天`,