ant-design-vue/components/date-picker/demo/time.md

47 lines
979 B
Markdown
Raw Normal View History

2018-03-15 13:40:34 +00:00
2018-03-20 01:10:56 +00:00
<cn>
#### 日期时间选择
2018-03-15 13:40:34 +00:00
增加选择时间功能,当 `showTime` 为一个对象时,其属性会传递给内建的 `TimePicker`
2018-03-20 01:10:56 +00:00
</cn>
2018-03-15 13:40:34 +00:00
2018-03-20 01:10:56 +00:00
<us>
#### Choose Time
2018-03-15 13:40:34 +00:00
This property provide an additional time selection. When `showTime` is an Object, its properties will be passed on to built-in `TimePicker`.
2018-03-20 01:10:56 +00:00
</us>
2018-03-15 13:40:34 +00:00
2018-03-20 01:10:56 +00:00
```html
<template>
2018-03-15 13:40:34 +00:00
<div>
2018-03-20 01:10:56 +00:00
<a-date-picker
2018-03-15 13:40:34 +00:00
showTime
format="YYYY-MM-DD HH:mm:ss"
placeholder="Select Time"
2018-03-20 01:10:56 +00:00
@change="onChange"
@ok="onOk"
2018-03-15 13:40:34 +00:00
/>
<br />
2018-03-20 01:10:56 +00:00
<a-range-picker
:showTime="{ format: 'HH:mm' }"
2018-03-15 13:40:34 +00:00
format="YYYY-MM-DD HH:mm"
2018-03-20 01:10:56 +00:00
:placeholder="['Start Time', 'End Time']"
@change="onChange"
@ok="onOk"
2018-03-15 13:40:34 +00:00
/>
</div>
2018-03-20 01:10:56 +00:00
</template>
<script>
export default {
methods: {
onChange(value, dateString) {
console.log('Selected Time: ', value);
console.log('Formatted Selected Time: ', dateString);
},
onOk(value) {
console.log('onOk: ', value);
}
}
}
</script>
```