feat(Calendar): add reset method

src/calendar/README.zh-CN.md

@@ -75,6 +75,51 @@ export default {
 }
 ```
 
+### 快捷选择
+
+将`show-confirm`设置为`false`可以隐藏确认按钮，这种情况下选择完成后会立即触发`confirm`事件
+
+```html
+<van-calendar v-model="show" :show-confirm="false" />
+```
+
+### 自定义日期范围
+
+通过`min-date`和`max-date`定义日历的范围
+
+```html
+<van-calendar
+  v-model="show"
+  :min-date="minDate"
+  :max-date="maxDate"
+/>
+```
+
+```js
+export default {
+  data() {
+    return {
+      show: false,
+      minDate: new Date(2010, 0, 1),
+      maxDate: new Date(2010, 0, 31)
+    };
+  }
+};
+```
+
+### 自定义按钮文字
+
+通过`confirm-text`设置按钮文字，通过`confirm-disabled-text`设置按钮禁用时的文字
+
+```html
+<van-calendar
+  v-model="show"
+  type="range"
+  confirm-text="完成"
+  confirm-disabled-text="请选择结束时间"
+/>
+```
+
 ## API
 
 ### Props
@@ -87,10 +132,10 @@ export default {
 | min-date | 最小日期 | *Date*  | 当前日期 | - |
 | max-date | 最大日期 | *Date*  | 当前日期的六个月后 | - |
 | default-date | 默认选中的日期 | *Date \| Date[]* | 今天 | - |
-| row-height | 日期所在行的高度 | *number* | `64` | - |
+| row-height | 日期行高 | *number* | `64` | - |
 | poppable | 是否以弹层的形式展示日历 | *boolean* | `true` | - |
 | show-mark | 是否显示月份背景水印 | *boolean* | `true` | - |
-| show-confirm | 是否展示确认按钮 | *boolean* | `false` | - |
+| show-confirm | 是否展示确认按钮 | *boolean* | `true` | - |
 | safe-area-inset-bottom | 是否开启底部安全区适配，[详细说明](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | *boolean* | `true` | - |
 | confirm-text | 确认按钮的文字 | *string* | `确定` | - |
 | confirm-disabled-text | 确认按钮处于禁用状态时的文字 | *string* | `确定` | - |
@@ -115,3 +160,4 @@ export default {
 
 | 方法名 | 说明 | 参数 | 返回值 |
 |------|------|------|------|
+| reset | 重置选中的日期到默认值 | - | - |

src/calendar/demo/index.vue

@@ -3,46 +3,60 @@
     <demo-block :title="$t('basicUsage')">
       <van-cell
         is-link
-        :title="$t('selectSingleDate')"
+        :title="$t('selectSingle')"
-        :value="formatFullDate(date.selectSingleDate)"
+        :value="formatFullDate(date.selectSingle)"
-        @click="toggle('selectSingleDate', true)"
+        @click="show('single', 'selectSingle')"
       />
 
       <van-cell
         is-link
-        :title="$t('selectDateRange')"
+        :title="$t('selectRange')"
-        :value="formatDateRange(date.selectDateRange)"
+        :value="formatRange(date.selectRange)"
-        @click="toggle('selectDateRange', true)"
+        @click="show('range', 'selectRange')"
       />
     </demo-block>
 
-    <demo-block :title="$t('showConfirm')">
+    <demo-block :title="$t('quickSelect')">
       <van-cell
         is-link
-        :title="$t('selectSingleDate')"
+        :title="$t('selectSingle')"
-        :value="formatFullDate(date.selectSingleDate)"
+        :value="formatFullDate(date.quickSelect1)"
-        @click="toggle('selectSingleDate', true, 'showConfirm')"
+        @click="show('single', 'quickSelect1')"
       />
 
       <van-cell
         is-link
-        :title="$t('selectDateRange')"
+        :title="$t('selectRange')"
-        :value="formatDateRange(date.selectDateRange)"
+        :value="formatRange(date.quickSelect2)"
-        @click="toggle('selectDateRange', true, 'showConfirm')"
+        @click="show('range', 'quickSelect2')"
+      />
+    </demo-block>
+
+    <demo-block :title="$t('customCalendar')">
+      <van-cell
+        is-link
+        :title="$t('customRange')"
+        :value="formatFullDate(date.customRange)"
+        @click="show('single', 'customRange')"
+      />
+
+      <van-cell
+        is-link
+        :title="$t('customConfirm')"
+        :value="formatRange(date.customConfirm)"
+        @click="show('range', 'customConfirm')"
       />
     </demo-block>
 
     <van-calendar
-      v-model="show.selectSingleDate"
+      v-model="showCalendar"
+      :type="type"
+      :min-date="minDate"
+      :max-date="maxDate"
       :show-confirm="showConfirm"
-      @confirm="onConfirm($event, 'selectSingleDate')"
+      :confirm-text="confirmText"
-    />
+      :confirm-disabled-text="confirmDisabledText"
-
+      @confirm="onConfirm"
-    <van-calendar
-      v-model="show.selectDateRange"
-      type="range"
-      :show-confirm="showConfirm"
-      @confirm="onConfirm($event, 'selectDateRange')"
     />
   </demo-section>
 </template>
@@ -51,39 +65,75 @@
 export default {
   i18n: {
     'zh-CN': {
-      selectSingleDate: '选择单个日期',
+      selectSingle: '选择单个日期',
-      selectDateRange: '选择日期区间',
+      selectRange: '选择日期区间',
-      showConfirm: '展示确认按钮'
+      quickSelect: '快捷选择',
+      confirmText: '完成',
+      customRange: '自定义范围',
+      customConfirm: '自定义按钮文字',
+      customCalendar: '自定义日历',
+      confirmDisabledText: '请选择结束时间'
     },
     'en-US': {
-      selectSingleDate: 'Select Single Date',
+      selectSingle: 'Select Single Date',
-      selectDateRange: 'Select Date Range',
+      selectRange: 'Select Date Range',
-      showConfirm: 'Show Confirm Button'
+      quickSelect: 'Quick Select',
+      confirmText: 'OK',
+      customRange: 'Custom Range',
+      customConfirm: 'Custom Confirm Text',
+      customCalendar: 'Custom Calendar',
+      confirmDisabledText: 'Select End Time'
     }
   },
 
   data() {
     return {
-      showConfirm: false,
       date: {
-        selectSingleDate: null,
+        selectSingle: null,
-        selectDateRange: []
+        selectRange: [],
+        quickSelect1: null,
+        quickSelect2: [],
+        customConfirm: [],
+        customRange: null
       },
-      show: {
+      type: 'single',
-        selectSingleDate: false,
+      minDate: undefined,
-        selectDateRange: false
+      maxDate: undefined,
-      }
+      showConfirm: false,
+      showCalendar: false,
+      confirmText: undefined,
+      confirmDisabledText: undefined,
     };
   },
 
   methods: {
-    toggle(type, show, setting) {
+    resetSettings() {
-      this.show[type] = show;
+      this.minDate = undefined;
+      this.maxDate = undefined;
+      this.showConfirm = true;
+      this.confirmText = undefined;
+      this.confirmDisabledText = undefined;
+    },
 
-      if (setting === 'showConfirm') {
+    show(type, id) {
-        this.showConfirm = true;
+      this.resetSettings();
-      } else {
+      this.id = id;
-        this.showConfirm = false;
+      this.type = type;
+      this.showCalendar = true;
+
+      switch (id) {
+        case 'quickSelect1':
+        case 'quickSelect2':
+          this.showConfirm = false;
+          break;
+        case 'customConfirm':
+          this.confirmText = this.$t('confirmText');
+          this.confirmDisabledText = this.$t('confirmDisabledText');
+          break;
+        case 'customRange':
+          this.minDate = new Date(2010, 0, 1);
+          this.maxDate = new Date(2010, 0, 31);
+          break;
       }
     },
 
@@ -99,16 +149,16 @@ export default {
       }
     },
 
-    formatDateRange(dateRange) {
+    formatRange(dateRange) {
       if (dateRange.length) {
         const [start, end] = dateRange;
         return `${this.formatDate(start)} - ${this.formatDate(end)}`;
       }
     },
 
-    onConfirm(date, type) {
+    onConfirm(date) {
-      this.date[type] = date;
+      this.showCalendar = false;
-      this.show[type] = false;
+      this.date[this.id] = date;
     }
   }
 };

src/calendar/index.js

@@ -20,7 +20,6 @@ export default createComponent({
     title: String,
     value: Boolean,
     defaultDate: [Date, Array],
-    showConfirm: Boolean,
     confirmText: String,
     confirmDisabledText: String,
     type: {
@@ -52,6 +51,10 @@ export default createComponent({
       type: Boolean,
       default: true
     },
+    showConfirm: {
+      type: Boolean,
+      default: true
+    },
     safeAreaInsetBottom: {
       type: Boolean,
       default: true
@@ -92,6 +95,10 @@ export default createComponent({
   },
 
   watch: {
+    type() {
+      this.reset();
+    },
+
     value(val) {
       if (val) {
         this.initRect();
@@ -110,6 +117,11 @@ export default createComponent({
   },
 
   methods: {
+    // @exposed-api
+    reset() {
+      this.currentDate = this.getInitialDate();
+    },
+
     initRect() {
       this.$nextTick(() => {
         this.bodyHeight = this.$refs.body.getBoundingClientRect().height;
@@ -140,7 +152,7 @@ export default createComponent({
       const heightSum = heights.reduce((a, b) => a + b, 0);
 
       // iOS scroll bounce may exceed the range
-      if (top < 0 || bottom > heightSum) {
+      if (top < 0 || (bottom > heightSum && top > 0)) {
         return;
       }
 
@@ -178,9 +190,7 @@ export default createComponent({
 
           if (compareToStart === 1) {
             this.select([startDay, date], true);
-          }
+          } else if (compareToStart === -1) {
-
-          if (compareToStart === -1) {
             this.select([date, null]);
           }
         } else {