feat(Calendar): support select date range

src/calendar/demo/index.vue

@@ -2,20 +2,46 @@
   <demo-section>
     <demo-block :title="$t('basicUsage')">
       <van-cell
-        :title="$t('selectDate')"
-        :value="formatDate(date.selectDate)"
         is-link
-        @click="toggle('selectDate', true)"
+        :title="$t('selectSingleDate')"
+        :value="formatDate(date.selectSingleDate)"
+        @click="toggle('selectSingleDate', true)"
       />
-    </demo-block>
 
-    <van-popup v-model="show.selectDate" round closeable position="bottom">
-      <van-calendar
-        v-model="date.selectDate"
-        :title="$t('title')"
-        @select="show.selectDate = false"
+      <van-popup
+        v-model="show.selectSingleDate"
+        round
+        closeable
+        position="bottom"
+        style="height: 80vh;"
+      >
+        <van-calendar
+          v-model="date.selectSingleDate"
+          @select="show.selectSingleDate = false"
+        />
+      </van-popup>
+
+      <van-cell
+        is-link
+        :title="$t('selectDateRange')"
+        :value="formatDateRange(date.selectDateRange)"
+        @click="toggle('selectDateRange', true)"
       />
-    </van-popup>
+
+      <van-popup
+        v-model="show.selectDateRange"
+        round
+        closeable
+        position="bottom"
+        style="height: 80vh;"
+      >
+        <van-calendar
+          v-model="date.selectDateRange"
+          type="range"
+          @select="show.selectDateRange = false"
+        />
+      </van-popup>
+    </demo-block>
   </demo-section>
 </template>
 
@@ -23,22 +49,24 @@
 export default {
   i18n: {
     'zh-CN': {
-      title: '日期选择',
-      selectDate: '选择日期'
+      selectSingleDate: '选择单个日期',
+      selectDateRange: '选择日期区间'
     },
     'en-US': {
-      title: 'Select Date',
-      selectDate: 'Select Date'
+      selectSingleDate: 'Select Single Date',
+      selectDateRange: 'Select Date Range'
     }
   },
 
   data() {
     return {
       date: {
-        selectDate: null
+        selectSingleDate: null,
+        selectDateRange: []
       },
       show: {
-        selectDate: false
+        selectSingleDate: false,
+        selectDateRange: false
       }
     };
   },
@@ -52,6 +80,14 @@ export default {
       if (date) {
         return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
       }
+    },
+
+    formatDateRange(dateRange) {
+      if (dateRange.length) {
+        return `${this.formatDate(dateRange[0])} - ${this.formatDate(
+          dateRange[1]
+        )}`;
+      }
     }
   }
 };