docs(Form): add DatetimePicker demo

This commit is contained in:
陈嘉涵
2020-02-11 14:45:47 +08:00
parent 3f33b6de47
commit ed16eb7a59
8 changed files with 163 additions and 6 deletions
+47 -1
View File
@@ -204,7 +204,7 @@ export default {
name="picker"
:value="value"
label="Picker"
placeholder="Picker"
placeholder="Select city"
@click="showPicker = true"
/>
<van-popup v-model="showPicker" position="bottom">
@@ -238,6 +238,52 @@ export default {
};
```
### Field Type - DatetimePicker
```html
<van-field
readonly
clickable
name="picker"
:value="value"
label="DatetimePicker"
placeholder="Select time"
@click="showPicker = true"
/>
<van-popup v-model="showPicker" position="bottom">
<van-datetime-picker
v-model="currentDate"
type="date"
@confirm="onConfirm"
@cancel="onCancel"
/>
</van-popup>
```
```js
export default {
data() {
return {
value: '',
showPicker: false,
currentDate: new Date(),
};
},
methods: {
formatDate(date) {
return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
},
onConfirm(date) {
this.value = this.formatDate(date);
this.showPicker = false;
},
onCancel() {
this.showPicker = false;
},
},
};
```
## API
### Props