在同一个选择器里选择日期和时间
DateTimePicker 由 DatePicker 和 TimePicker 派生，Picker Options 或者其他选项可以参照 DatePicker 和 TimePicker。
日期和时间点
通过设置type属性为datetime，即可在同一个选择器里同时进行日期和时间的选择。快捷选项的使用方法与 Date Picker 相同。
1 <template> 2 <div class="block"> 3 <span class="demonstration">默认</span> 4 <el-date-picker 5 v-model="value1" 6 type="datetime" 7 placeholder="选择日期时间"> 8 </el-date-picker> 9 </div> 10 <div class="block"> 11 <span class="demonstration">带快捷选项</span> 12 <el-date-picker 13 v-model="value2" 14 type="datetime" 15 placeholder="选择日期时间" 16 align="right" 17 :picker-options="pickerOptions1"> 18 </el-date-picker> 19 </div> 20 </template> 21 22 <script> 23 export default { 24 data() { 25 return { 26 pickerOptions1: { 27 shortcuts: [{ 28 text: '今天', 29 onClick(picker) { 30 picker.$emit('pick', new Date()); 31 } 32 }, { 33 text: '昨天', 34 onClick(picker) { 35 const date = new Date(); 36 date.setTime(date.getTime() - 3600 * 1000 * 24); 37 picker.$emit('pick', date); 38 } 39 }, { 40 text: '一周前', 41 onClick(picker) { 42 const date = new Date(); 43 date.setTime(date.getTime() - 3600 * 1000 * 24 * 7); 44 picker.$emit('pick', date); 45 } 46 }] 47 }, 48 value1: '', 49 value2: '' 50 }; 51 } 52 }; 53 </script>
日期和时间范围
设置type为datetimerange即可选择日期和时间范围
1 <template> 2 <div class="block"> 3 <span class="demonstration">默认</span> 4 <el-date-picker 5 v-model="value3" 6 type="datetimerange" 7 range-separator="至" 8 start-placeholder="开始日期" 9 end-placeholder="结束日期"> 10 </el-date-picker> 11 </div> 12 <div class="block"> 13 <span class="demonstration">带快捷选项</span> 14 <el-date-picker 15 v-model="value4" 16 type="datetimerange" 17 :picker-options="pickerOptions2" 18 range-separator="至" 19 start-placeholder="开始日期" 20 end-placeholder="结束日期" 21 align="right"> 22 </el-date-picker> 23 </div> 24 </template> 25 26 <script> 27 export default { 28 data() { 29 return { 30 pickerOptions2: { 31 shortcuts: [{ 32 text: '最近一周', 33 onClick(picker) { 34 const end = new Date(); 35 const start = new Date(); 36 start.setTime(start.getTime() - 3600 * 1000 * 24 * 7); 37 picker.$emit('pick', [start, end]); 38 } 39 }, { 40 text: '最近一个月', 41 onClick(picker) { 42 const end = new Date(); 43 const start = new Date(); 44 start.setTime(start.getTime() - 3600 * 1000 * 24 * 30); 45 picker.$emit('pick', [start, end]); 46 } 47 }, { 48 text: '最近三个月', 49 onClick(picker) { 50 const end = new Date(); 51 const start = new Date(); 52 start.setTime(start.getTime() - 3600 * 1000 * 24 * 90); 53 picker.$emit('pick', [start, end]); 54 } 55 }] 56 }, 57 value3: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)], 58 value4: '' 59 }; 60 } 61 }; 62 </script>
默认的起始与结束时刻
使用datetimerange进行范围选择时，在日期选择面板中选定起始与结束的日期，默认会使用该日期的00:00:00作为起始与结束的时刻；通过选项default-time可以控制选中起始与结束日期时所使用的具体时刻。default-time接受一个数组，数组每项值为字符串，形如12:00:00，其中第一项控制起始日期的具体时刻，第二项控制结束日期的具体时刻。
1 <template> 2 <div class="block"> 3 <span class="demonstration">起始日期时刻为 12:00:00</span> 4 <el-date-picker 5 v-model="value5" 6 type="datetimerange" 7 start-placeholder="开始日期" 8 end-placeholder="结束日期" 9 :default-time="['12:00:00']"> 10 </el-date-picker> 11 </div> 12 <div class="block"> 13 <span class="demonstration">起始日期时刻为 12:00:00，结束日期时刻为 08:00:00</span> 14 <el-date-picker 15 v-model="value6" 16 type="datetimerange" 17 align="right" 18 start-placeholder="开始日期" 19 end-placeholder="结束日期" 20 :default-time="['12:00:00', '08:00:00']"> 21 </el-date-picker> 22 </div> 23 </template> 24 25 <script> 26 export default { 27 data() { 28 return { 29 value5: '', 30 value6: '' 31 }; 32 } 33 }; 34 </script>
Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| readonly | 完全只读 | boolean | — | false |
| disabled | 禁用 | boolean | — | false |
| editable | 文本框可输入 | boolean | — | true |
| clearable | 是否显示清除按钮 | boolean | — | true |
| size | 输入框尺寸 | string | large, small, mini | — |
| placeholder | 非范围选择时的占位内容 | string | — | — |
| start-placeholder | 范围选择时开始日期的占位内容 | string | — | — |
| end-placeholder | 范围选择时结束日期的占位内容 | string | — | — |
| time-arrow-control | 是否使用箭头进行时间选择 | boolean | — | false |
| type | 显示类型 | string | year/month/date/week/ datetime/datetimerange/daterange | date |
| format | 显示在输入框中的格式 | string | 见日期格式 | yyyy-MM-dd |
| align | 对齐方式 | string | left, center, right | left |
| popper-class | DateTimePicker 下拉框的类名 | string | — | — |
| picker-options | 当前时间日期选择器特有的选项参考下表 | object | — | {} |
| range-separator | 选择范围时的分隔符 | string | - | '-' |
| default-value | 可选，选择器打开时默认显示的时间 | Date | 可被new Date()解析 |
— |
| default-time | 范围选择时选中日期的默认具体时刻 | string[] | 数组，长度为 2，每项值为字符串，形如12:00:00，第一项指定开始日期的时刻，第二项指定结束日期的时刻，不指定会使用时刻 00:00:00 |
— |
| value-format | 可选，绑定值的格式。不指定则绑定值为 Date 对象 | string | 见日期格式 | — |
| name | 原生属性 | string | — | — |
| unlink-panels | 在范围选择器里取消两个日期面板之间的联动 | boolean | — | false |
| prefix-icon | 自定义头部图标的类名 | string | — | el-icon-date |
| clear-icon | 自定义清空图标的类名 | string | — | el-icon-circle-close |
¶Picker Options
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| shortcuts | 设置快捷选项，需要传入 { text, onClick } 对象用法参考 demo 或下表 | Object[] | — | — |
| disabledDate | 设置禁用状态，参数为当前日期，要求返回 Boolean | Function | — | — |
| firstDayOfWeek | 周起始日 | Number | 1 到 7 | 7 |
¶Shortcuts
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| text | 标题文本 | string | — | — |
| onClick | 选中后的回调函数，参数是 vm，可通过触发 'pick' 事件设置选择器的值。例如 vm.$emit('pick', new Date()) | function | — | — |
¶Events
| Event Name | Description | Parameters |
|---|---|---|
| change | 用户确认选定的值时触发 | 组件绑定值。格式与绑定值一致，可受 value-format 控制 |
| blur | 当 input 失去焦点时触发 | 组件实例 |
| focus | 当 input 获得焦点时触发 | 组件实例 |
¶Methods
| 方法名 | 说明 | 参数 |
|---|---|---|
| focus | 使 input 获取焦点 | — |