feat(Calendar): add default-date prop and remove v-model

src/calendar/README.zh-CN.md

@@ -23,7 +23,7 @@ Vue.use(Calendar);
 <!-- 点击单元格后唤起日历组件 -->
 <van-cell
   title="选择单个日期"
-  :value="formattedDate"
+  :value="selectedDate"
   @click="showCalendar = true"
 />
 
@@ -35,7 +35,7 @@ Vue.use(Calendar);
   position="bottom"
   style="height: 80vh;"
 >
-  <van-calendar v-model="currentDate" />
+  <van-calendar @select="onSelect" />
 </van-popup>
 ```
 
@@ -44,18 +44,14 @@ export default {
   data() {
     return {
       // 当前选中的日期
-      currentDate: null,
+      selectedDate: '',
       showCalendar: false
     };
   },
 
   computed: {
-    // 将 Date 格式化为 YYYY/MM/DD 的格式
+    onSelect(date) {
-    formattedDate() {
+      this.selectedDate = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
-      const date = this.currentDate;
-      if (date) {
-        return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
-      }
     }
   }
 }
@@ -63,28 +59,23 @@ export default {
 
 ### 选择日期区间
 
-设置`type`为`range`后可以选择日期区间，此时`v-model`绑定的 currrentDate 为数组结构，数组第一项为开始时间，第二项为结束时间。
+设置`type`为`range`后可以选择日期区间，此时`select`事件返回的 date 为数组结构，数组第一项为开始时间，第二项为结束时间。
 
 ```html
-<van-calendar
+<van-calendar type="range" @select="onSelect" />
-  v-model="currentDate"
-  type="range"
-  @select="onSelect"
-/>
 ```
 
 ```js
 export default {
   data() {
     return {
-      currrentDate: []
+      selectedDate: []
     };
   },
 
   methods: {
     onSelect(date) {
-      console.log('开始时间: ' + date[0]);
+      this.selectedDate = date;
-      console.log('结束时间: ' + date[1]);
     }
   }
 }
@@ -96,11 +87,11 @@ export default {
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 |------|------|------|------|------|
-| v-model | 当前选中的日期 | *Date* | - | - |
 | type | 选择类型，`single`表示选择单个日期，<br>`range`表示选择日期区间 | *string* | `single` | - |
 | title | 日历标题 | *string* | `日期选择` | - |
 | min-date | 最小日期 | *Date*  | 当前日期 | - |
 | max-date | 最大日期 | *Date*  | 当前日期的六个月后 | - |
+| default-date | 默认选中的日期 | *Date \| Date[]* | 今天 | - |
 | row-height | 日期所在行的高度 | *number* | `64` | - |
 | button-text | 确认按钮的文字 | *string* | `确定` | - |
 | button-disabled-text | 确认按钮处于禁用状态时的文字 | *string* | `确定` | - |

src/calendar/components/Month.js

@@ -13,7 +13,7 @@ export default createComponent({
     showMark: Boolean,
     showTitle: Boolean,
     rowHeight: Number,
-    currentValue: [Date, Array]
+    currentDate: [Date, Array]
   },
 
   data() {
@@ -76,18 +76,18 @@ export default createComponent({
 
   methods: {
     getDayType(day) {
-      const { type, minDate, maxDate, currentValue } = this;
+      const { type, minDate, maxDate, currentDate } = this;
 
       if (compareDay(day, minDate) < 0 || compareDay(day, maxDate) > 0) {
         return 'disabled';
       }
 
       if (type === 'single') {
-        return compareDay(day, currentValue) === 0 ? 'selected' : '';
+        return compareDay(day, currentDate) === 0 ? 'selected' : '';
       }
 
       if (type === 'range') {
-        const [startDay, endDay] = this.currentValue;
+        const [startDay, endDay] = this.currentDate;
 
         if (!startDay) {
           return;

src/calendar/demo/index.vue

@@ -15,10 +15,7 @@
         position="bottom"
         style="height: 80vh;"
       >
-        <van-calendar
+        <van-calendar @select="onSelect($event, 'selectSingleDate')" />
-          v-model="date.selectSingleDate"
-          @select="show.selectSingleDate = false"
-        />
       </van-popup>
 
       <van-cell
@@ -36,9 +33,8 @@
         style="height: 80vh;"
       >
         <van-calendar
-          v-model="date.selectDateRange"
           type="range"
-          @select="show.selectDateRange = false"
+          @select="onSelect($event, 'selectDateRange')"
         />
       </van-popup>
     </demo-block>
@@ -93,6 +89,11 @@ export default {
         const [start, end] = dateRange;
         return `${this.formatDate(start)} - ${this.formatDate(end)}`;
       }
+    },
+
+    onSelect(date, type) {
+      this.date[type] = date;
+      this.show[type] = false;
     }
   }
 };

src/calendar/index.js

@@ -18,8 +18,8 @@ import Header from './components/Header';
 export default createComponent({
   props: {
     title: String,
-    value: [Date, Array],
     buttonText: String,
+    defaultDate: [Date, Array],
     buttonDisabledText: String,
     type: {
       type: String,
@@ -27,16 +27,16 @@ export default createComponent({
     },
     minDate: {
       type: Date,
-      default: () => new Date(),
+      validator: isDate,
-      validator: isDate
+      default: () => new Date()
     },
     maxDate: {
       type: Date,
+      validator: isDate,
       default() {
         const now = new Date();
         return new Date(now.getFullYear(), now.getMonth() + 6, now.getDate());
-      },
+      }
-      validator: isDate
     },
     rowHeight: {
       type: Number,
@@ -55,7 +55,7 @@ export default createComponent({
   data() {
     return {
       monthTitle: '',
-      currentValue: this.getDefaultValue()
+      currentDate: this.getInitialDate()
     };
   },
 
@@ -76,8 +76,8 @@ export default createComponent({
   },
 
   watch: {
-    value(val) {
+    defaultDate(val) {
-      this.currentValue = val;
+      this.currentDate = val;
     }
   },
 
@@ -87,16 +87,16 @@ export default createComponent({
   },
 
   methods: {
-    getDefaultValue() {
+    getInitialDate() {
-      const { type, value, minDate } = this;
+      const { type, defaultDate, minDate } = this;
 
       if (type === 'single') {
-        return value || minDate;
+        return defaultDate || minDate;
       }
 
       if (type === 'range') {
-        const range = value || [];
+        const [startDay, endDay] = defaultDate || [];
-        return [range[0] || minDate, range[1] || getNextDay(minDate)];
+        return [startDay || minDate, endDay || getNextDay(minDate)];
       }
     },
 
@@ -132,32 +132,31 @@ export default createComponent({
       const { date } = item;
 
       if (this.type === 'single') {
-        this.$emit('input', date);
+        this.currentDate = date;
         this.$emit('select', date);
       }
 
       if (this.type === 'range') {
-        const [startDay, endDay] = this.currentValue;
+        const [startDay, endDay] = this.currentDate;
 
         if (startDay && !endDay) {
           const compareToStart = compareDay(date, startDay);
 
           if (compareToStart === 1) {
-            this.$emit('input', [startDay, date]);
+            this.currentDate = [startDay, date];
           }
 
           if (compareToStart === -1) {
-            this.$emit('input', [date, null]);
+            this.currentDate = [date, null];
           }
         } else {
-          this.$emit('input', [date, null]);
+          this.currentDate = [date, null];
         }
       }
     },
 
     onConfirmRange() {
-      this.$emit('input', this.currentValue);
+      this.$emit('select', this.currentDate);
-      this.$emit('select', this.currentValue);
     },
 
     genMonth(date, index) {
@@ -172,7 +171,7 @@ export default createComponent({
           showMark={this.showMark}
           rowHeight={this.rowHeight}
           showTitle={index !== 0}
-          currentValue={this.currentValue}
+          currentDate={this.currentDate}
           onClick={this.onClickDay}
         />
       );
@@ -186,7 +185,7 @@ export default createComponent({
       }
 
       if (this.type === 'range') {
-        const disabled = !this.currentValue[1];
+        const disabled = !this.currentDate[1];
         const text = disabled ? this.buttonDisabledText : this.buttonText;
 
         return (