feat(Calendar): add select event

src/calendar/README.zh-CN.md

@@ -24,17 +24,21 @@ Vue.use(Calendar);
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 |------|------|------|------|------|
 | v-model | 选中的日期 | `Date` | - | - |
+| type | 选择类型，`single`为选择单日，`range`为选择日期区间 | `string` | `single` | - |
 | title | 日历标题 | `string` | - | - |
+| min-date | 最小日期 | `Date` | 当前时间 | - |
+| max-date | 最大日期 | `Date` | 当前时间的六个月后 | - |
 
 ### Events
 
 | 事件名 | 说明 | 回调参数 |
 |------|------|------|
+| select | 选择日期时触发 | value: Date |
 
 ### Slots
 
-| 名称 | 说明 | SlotProps |
+| 名称 | 说明 |
-|------|------|------|
+|------|------|
 
 ### 方法
 

src/calendar/demo/index.vue

@@ -3,18 +3,18 @@
     <demo-block :title="$t('basicUsage')">
       <van-cell
         :title="$t('selectDate')"
+        :value="formatDate(date.selectDate)"
         is-link
         @click="toggle('selectDate', true)"
       />
     </demo-block>
 
-    <van-popup
+    <van-popup v-model="show.selectDate" round closeable position="bottom">
-      v-model="show.selectDate"
+      <van-calendar
-      round
+        v-model="date.selectDate"
-      closeable
+        :title="$t('title')"
-      position="bottom"
+        @select="show.selectDate = false"
-    >
+      />
-      <van-calendar v-model="date.selectDate" :title="$t('title')" />
     </van-popup>
   </demo-section>
 </template>
@@ -46,6 +46,12 @@ export default {
   methods: {
     toggle(type, show) {
       this.show[type] = show;
+    },
+
+    formatDate(date) {
+      if (date) {
+        return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
+      }
     }
   }
 };

src/calendar/index.js

@@ -172,6 +172,7 @@ export default createComponent({
 
       if (this.type === 'single') {
         this.$emit('input', item.date);
+        this.$emit('select', item.date);
       }
     }
   },

src/calendar/index.less

@@ -76,9 +76,11 @@
     width: 14.285%;
     height: 64px;
     font-size: @font-size-lg;
+    cursor: pointer;
 
     &--disabled {
       color: @gray-5;
+      cursor: default;
     }
   }