feat(Calendar): add multiple type (#5705)

This commit is contained in:
chenjiahan
2020-03-03 21:02:00 +08:00
parent c4be70c4e8
commit 6d19ad590b
9 changed files with 249 additions and 49 deletions
+25 -1
View File
@@ -44,6 +44,30 @@ export default {
};
```
### Select Multiple Date
```html
<van-cell title="Select Multiple Date" :value="text" @click="show = true" />
<van-calendar v-model="show" type="multiple" @confirm="onConfirm" />
```
```js
export default {
data() {
return {
text: '',
show: false
};
},
methods: {
onConfirm(date) {
this.show = false;
this.text = `${date.length} dates selected`;
}
}
};
```
### Select Date Range
You can select a date range after setting `type` to` range`. In range mode, the date returned by the `confirm` event is an array, the first item in the array is the start time and the second item is the end time.
@@ -212,7 +236,7 @@ Set `poppable` to `false`, the calendar will be displayed directly on the page i
| Attribute | Description | Type | Default |
|------|------|------|------|
| v-model | Whether to show calendar | *boolean* | `false` |
| type | Typecan be set to `single` `range` | *string* | `single` |
| type `v2.5.4` | Typecan be set to `range` `multiple` | *string* | `single` |
| title | Title of calendar | *string* | `Calendar` |
| color | Color for the bottom button and selected date | *string* | `#ee0a24` |
| min-date | Min date | *Date* | Today |