feat(Calendar): add show-confirm prop、confirm event

src/calendar/README.zh-CN.md

@@ -17,19 +17,12 @@ Vue.use(Calendar);
 
 ### 选择单个日期
 
-下面演示了结合单元格来使用日历组件的用法，点击单元格后唤起日历组件。
+下面演示了结合单元格来使用日历组件的用法，日期选择完成后会触发`confirm`事件
 
 ```html
-<van-cell
+<van-cell title="选择单个日期" :value="date" @click="show = true" />
-  title="选择单个日期"
-  :value="selectedDate"
-  @click="showCalendar = true"
-/>
 
-<van-calendar
+<van-calendar v-model="show" @confirm="onConfirm" />
-  v-model="showCalendar"
-  @select="onSelect"
-/>
 ```
 
 ```js
@@ -37,14 +30,19 @@ export default {
   data() {
     return {
       // 当前选中的日期
-      selectedDate: '',
+      date: '',
-      showCalendar: false
+      show: false
     };
   },
 
-  computed: {
+  methods: {
-    onSelect(date) {
+    formatDate() {
-      this.selectedDate = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
+      return `${date.getMonth() + 1}/${date.getDate()}`;
+    },
+    onConfirm(date) {
+      const [start, end] = date;
+      this.show = false;
+      this.date = `${this.formatDate(start)} - ${this.formatDate(end)}`;
     }
   }
 }
@@ -52,23 +50,26 @@ export default {
 
 ### 选择日期区间
 
-设置`type`为`range`后可以选择日期区间，此时`select`事件返回的 date 为数组结构，数组第一项为开始时间，第二项为结束时间。
+设置`type`为`range`后可以选择日期区间，此时`confirm`事件返回的 date 为数组结构，数组第一项为开始时间，第二项为结束时间。
 
 ```html
-<van-calendar type="range" @select="onSelect" />
+<van-cell title="选择日期区间" :value="date" @click="show = true" />
+
+<van-calendar v-model="show" type="range" @confirm="onConfirm" />
 ```
 
 ```js
 export default {
   data() {
     return {
-      selectedDate: []
+      show: false,
+      date: []
     };
   },
-
   methods: {
-    onSelect(date) {
+    onConfirm(date) {
-      this.selectedDate = date;
+      this.show = false;
+      this.date = date;
     }
   }
 }
@@ -87,17 +88,19 @@ export default {
 | max-date | 最大日期 | *Date*  | 当前日期的六个月后 | - |
 | default-date | 默认选中的日期 | *Date \| Date[]* | 今天 | - |
 | row-height | 日期所在行的高度 | *number* | `64` | - |
-| button-text | 确认按钮的文字 | *string* | `确定` | - |
-| button-disabled-text | 确认按钮处于禁用状态时的文字 | *string* | `确定` | - |
 | poppable | 是否以弹层的形式展示日历 | *boolean* | `true` | - |
 | show-mark | 是否显示月份背景水印 | *boolean* | `true` | - |
+| show-confirm | 是否展示确认按钮 | *boolean* | `false` | - |
 | safe-area-inset-bottom | 是否开启底部安全区适配，[详细说明](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | *boolean* | `true` | - |
+| confirm-text | 确认按钮的文字 | *string* | `确定` | - |
+| confirm-disabled-text | 确认按钮处于禁用状态时的文字 | *string* | `确定` | - |
 
 ### Events
 
 | 事件名 | 说明 | 回调参数 |
 |------|------|------|
-| select | 确认选择日期时触发 | value: Date \| Date[] |
+| select | 点击任意日期时触发 | value: Date \| Date[] |
+| confirm | 日期选择完成后触发，若`show-confirm`为`true`，则点击确认按钮后触发 | value: Date \| Date[] |
 
 ### Slots
 

src/calendar/demo/index.vue

@@ -8,25 +8,42 @@
         @click="toggle('selectSingleDate', true)"
       />
 
-      <van-calendar
-        v-model="show.selectSingleDate"
-        :poppable="false"
-        @select="onSelect($event, 'selectSingleDate')"
-      />
-
       <van-cell
         is-link
         :title="$t('selectDateRange')"
         :value="formatDateRange(date.selectDateRange)"
         @click="toggle('selectDateRange', true)"
       />
+    </demo-block>
 
-      <van-calendar
+    <demo-block :title="$t('showConfirm')">
-        v-model="show.selectDateRange"
+      <van-cell
-        type="range"
+        is-link
-        @select="onSelect($event, 'selectDateRange')"
+        :title="$t('selectSingleDate')"
+        :value="formatFullDate(date.selectSingleDate)"
+        @click="toggle('selectSingleDate', true, 'showConfirm')"
+      />
+
+      <van-cell
+        is-link
+        :title="$t('selectDateRange')"
+        :value="formatDateRange(date.selectDateRange)"
+        @click="toggle('selectDateRange', true, 'showConfirm')"
       />
     </demo-block>
+
+    <van-calendar
+      v-model="show.selectSingleDate"
+      :show-confirm="showConfirm"
+      @confirm="onConfirm($event, 'selectSingleDate')"
+    />
+
+    <van-calendar
+      v-model="show.selectDateRange"
+      type="range"
+      :show-confirm="showConfirm"
+      @confirm="onConfirm($event, 'selectDateRange')"
+    />
   </demo-section>
 </template>
 
@@ -35,16 +52,19 @@ export default {
   i18n: {
     'zh-CN': {
       selectSingleDate: '选择单个日期',
-      selectDateRange: '选择日期区间'
+      selectDateRange: '选择日期区间',
+      showConfirm: '展示确认按钮'
     },
     'en-US': {
       selectSingleDate: 'Select Single Date',
-      selectDateRange: 'Select Date Range'
+      selectDateRange: 'Select Date Range',
+      showConfirm: 'Show Confirm Button'
     }
   },
 
   data() {
     return {
+      showConfirm: false,
       date: {
         selectSingleDate: null,
         selectDateRange: []
@@ -57,8 +77,14 @@ export default {
   },
 
   methods: {
-    toggle(type, show) {
+    toggle(type, show, setting) {
       this.show[type] = show;
+
+      if (setting === 'showConfirm') {
+        this.showConfirm = true;
+      } else {
+        this.showConfirm = false;
+      }
     },
 
     formatDate(date) {
@@ -80,7 +106,7 @@ export default {
       }
     },
 
-    onSelect(date, type) {
+    onConfirm(date, type) {
       this.date[type] = date;
       this.show[type] = false;
     }

src/calendar/index.js

@@ -20,9 +20,10 @@ export default createComponent({
   props: {
     title: String,
     value: Boolean,
-    buttonText: String,
     defaultDate: [Date, Array],
-    buttonDisabledText: String,
+    showConfirm: Boolean,
+    confirmText: String,
+    confirmDisabledText: String,
     type: {
       type: String,
       default: 'single'
@@ -78,6 +79,16 @@ export default createComponent({
       } while (compareMonth(cursor, this.maxDate) !== 1);
 
       return months;
+    },
+
+    buttonDisabled() {
+      if (this.type === 'single') {
+        return !this.currentDate;
+      }
+
+      if (this.type === 'range') {
+        return !this.currentDate[0] || !this.currentDate[1];
+      }
     }
   },
 
@@ -152,8 +163,7 @@ export default createComponent({
       const { date } = item;
 
       if (this.type === 'single') {
-        this.currentDate = date;
+        this.select(date, true);
-        this.$emit('select', date);
       }
 
       if (this.type === 'range') {
@@ -163,14 +173,14 @@ export default createComponent({
           const compareToStart = compareDay(date, startDay);
 
           if (compareToStart === 1) {
-            this.currentDate = [startDay, date];
+            this.select([startDay, date], true);
           }
 
           if (compareToStart === -1) {
-            this.currentDate = [date, null];
+            this.select([date, null]);
           }
         } else {
-          this.currentDate = [date, null];
+          this.select([date, null]);
         }
       }
     },
@@ -179,8 +189,17 @@ export default createComponent({
       this.$emit('input', val);
     },
 
-    onConfirmRange() {
+    select(date, complete) {
+      this.currentDate = date;
       this.$emit('select', this.currentDate);
+
+      if (complete && !this.showConfirm) {
+        this.onConfirm();
+      }
+    },
+
+    onConfirm() {
+      this.$emit('confirm', this.currentDate);
     },
 
     genMonth(date, index) {
@@ -208,18 +227,19 @@ export default createComponent({
         return slot;
       }
 
-      if (this.type === 'range') {
+      if (this.showConfirm) {
-        const disabled = !this.currentDate[1];
+        const text = this.buttonDisabled
-        const text = disabled ? this.buttonDisabledText : this.buttonText;
+          ? this.confirmDisabledText
+          : this.confirmText;
 
         return (
           <Button
             round
             block
             type="danger"
-            disabled={disabled}
             class={bem('confirm')}
-            onClick={this.onConfirmRange}
+            disabled={this.buttonDisabled}
+            onClick={this.onConfirm}
           >
             {text || t('confirm')}
           </Button>

src/calendar/index.less

@@ -52,6 +52,7 @@
     position: relative;
     display: flex;
     flex-wrap: wrap;
+    user-select: none;
   }
 
   &__month-mark {