2020-08-13 15:18:26 +08:00
## DateTimePicker
Select date and time in one picker.
:::tip
2020-12-18 11:28:38 +08:00
DateTimePicker is derived from DatePicker and TimePicker. For a more detailed explanation on attributes, you can refer to DatePicker and TimePicker.
2020-08-13 15:18:26 +08:00
:::
### Date and time
:::demo You can select date and time in one picker at the same time by setting `type` to `datetime` . The way to use shortcuts is the same as Date Picker.
```html
< template >
< div class = "block" >
< span class = "demonstration" > Default< / span >
< el-date-picker
v-model="value1"
type="datetime"
placeholder="Select date and time">
< / el-date-picker >
< / div >
< div class = "block" >
< span class = "demonstration" > With shortcuts< / span >
< el-date-picker
v-model="value2"
type="datetime"
placeholder="Select date and time"
2020-12-18 10:04:48 +08:00
:shortcuts="shortcuts">
2020-08-13 15:18:26 +08:00
< / el-date-picker >
< / div >
< div class = "block" >
< span class = "demonstration" > With default time< / span >
< el-date-picker
v-model="value3"
type="datetime"
placeholder="Select date and time"
2020-12-18 13:45:52 +08:00
:default-time="defaultTime">
2020-08-13 15:18:26 +08:00
< / el-date-picker >
< / div >
< / template >
< script >
export default {
data() {
return {
2020-12-18 10:04:48 +08:00
shortcuts: [{
text: 'Today',
value: new Date(),
}, {
text: 'Yesterday',
value: (() => {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24);
return date
})(),
}, {
2020-12-18 10:57:47 +08:00
text: 'A week ago',
2020-12-18 10:04:48 +08:00
value: (() => {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
return date
})(),
}],
2020-08-13 15:18:26 +08:00
value1: '',
value2: '',
2020-12-18 13:45:52 +08:00
value3: '',
defaultTime: new Date(2000, 1, 1, 12, 0, 0) // '12:00:00'
2020-08-13 15:18:26 +08:00
};
}
};
< / script >
```
:::
### Date and time range
:::demo You can select date and time range by setting `type` to `datetimerange` .
```html
< template >
< div class = "block" >
< span class = "demonstration" > Default< / span >
< el-date-picker
v-model="value1"
type="datetimerange"
range-separator="To"
start-placeholder="Start date"
end-placeholder="End date">
< / el-date-picker >
< / div >
< div class = "block" >
< span class = "demonstration" > With shortcuts< / span >
< el-date-picker
v-model="value2"
type="datetimerange"
2020-12-18 10:57:47 +08:00
:shortcuts="shortcuts"
2020-08-13 15:18:26 +08:00
range-separator="To"
start-placeholder="Start date"
end-placeholder="End date"
align="right">
< / el-date-picker >
< / div >
< / template >
< script >
export default {
data() {
return {
2020-12-18 10:04:48 +08:00
shortcuts: [{
text: 'Last week',
value: (() => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
return [start, end]
})()
}, {
text: 'Last month',
value: (() => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
return [start, end]
})()
}, {
text: 'Last 3 months',
value: (() => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
return [start, end]
})()
}],
2020-08-13 15:18:26 +08:00
value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
value2: ''
};
}
};
< / script >
```
:::
### Default time value for start date and end date
2020-12-18 13:45:52 +08:00
:::demo When picking date range on the date panel with type `datetimerange` , `00:00:00` will be used as the default time value for start and end date. We can control it with the `default-time` attribute. `default-time` accepts an array of up to two Date objects. The first item controls time value of the start date and the second item controls time value of the end date.
2020-08-13 15:18:26 +08:00
```html
< template >
< div class = "block" >
< span class = "demonstration" > Start date time 12:00:00< / span >
< el-date-picker
v-model="value1"
type="datetimerange"
start-placeholder="Start Date"
end-placeholder="End Date"
2020-12-06 21:33:38 +08:00
:default-time="defaultTime1">
2020-08-13 15:18:26 +08:00
< / el-date-picker >
< / div >
< div class = "block" >
< span class = "demonstration" > Start date time 12:00:00, end date time 08:00:00< / span >
< el-date-picker
v-model="value2"
type="datetimerange"
align="right"
start-placeholder="Start Date"
end-placeholder="End Date"
2020-12-06 21:33:38 +08:00
:default-time="defaultTime2">
2020-08-13 15:18:26 +08:00
< / el-date-picker >
< / div >
< / template >
< script >
export default {
data() {
return {
value1: '',
2020-12-06 21:33:38 +08:00
value2: '',
defaultTime1: [
new Date(2000, 1, 1, 12, 0, 0),
], // '12:00:00'
defaultTime2: [
new Date(2000, 1, 1, 12, 0, 0),
new Date(2000, 2, 1, 8, 0, 0)
] // '12:00:00', '08:00:00'
2020-08-13 15:18:26 +08:00
};
}
};
< / script >
```
:::
### Attributes
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------------- |---------- |-------------------------------- |-------- |
2021-05-24 11:10:53 +08:00
| model-value / v-model | binding value | date(DateTimePicker) / array(DateTimeRangePicker) | — | — |
2020-08-13 15:18:26 +08:00
| readonly | whether DatePicker is read only | boolean | — | false |
| disabled | whether DatePicker is disabled | boolean | — | false |
| editable | whether the input is editable | boolean | — | true |
| clearable | whether to show clear button | boolean | — | true |
2020-11-02 11:05:08 +08:00
|size | size of Input | string | large/medium/small/mini | large |
2020-08-13 15:18:26 +08:00
| placeholder | placeholder in non-range mode | string | — | — |
| start-placeholder | placeholder for the start date in range mode | string | — | — |
| end-placeholder | placeholder for the end date in range mode | string | — | — |
| time-arrow-control | whether to pick time using arrow buttons | boolean | — | false |
| type | type of the picker | string | year/month/date/datetime/ week/datetimerange/daterange | date |
2020-12-31 11:53:38 +08:00
| format | format of the displayed value in the input box | string | see [date formats ](#/en-US/component/date-picker#date-formats ) | YYYY-MM-DD HH:mm:ss |
2020-08-13 15:18:26 +08:00
| align | alignment | left/center/right | left |
| popper-class | custom class name for DateTimePicker's dropdown | string | — | — |
| range-separator | range separator | string | - | '-' |
| default-value | optional, default date of the calendar | Date | anything accepted by `new Date()` | — |
2020-12-18 13:45:52 +08:00
| default-time | the default time value after picking a date | non-range: Date / range: Date[] | non-range: a Date object, range: array of two Date objects, and the first item is for the start date and second for the end date. Time `00:00:00` will be used if not specified | — |
2020-08-13 15:18:26 +08:00
| name | same as `name` in native input | string | — | — |
| unlink-panels | unllink two date-panels in range-picker | boolean | — | false |
| prefix-icon | Custom prefix icon class | string | — | el-icon-date |
| clear-icon | Custom clear icon class | string | — | el-icon-circle-close |
2021-01-27 16:20:08 +08:00
| shortcuts | an object array to set shortcut options | object[{ text: string, value: Date }] | — | — |
2020-08-13 15:18:26 +08:00
| disabledDate | a function determining if a date is disabled with that date as its parameter. Should return a Boolean | function | — | — |
| cellClassName | set custom className | Function(Date) | — | — |
2020-12-18 11:28:38 +08:00
2020-08-13 15:18:26 +08:00
### Events
| Event Name | Description | Parameters |
|---------|--------|---------|
| change | triggers when user confirms the value | component's binding value |
| blur | triggers when Input blurs | component instance |
| focus | triggers when Input focuses | component instance |
### Methods
| Method | Description | Parameters |
|------|--------|-------|
| focus | focus the Input component | — |