1. DateTimePicker日期时间选择器
1.1. 在同一个选择器里选择日期和时间。
1.2. DateTimePicker由DatePicker和TimePicker派生, Picker Options或者其他选项可以参照DatePicker和TimePicker。
1.3. 日期时间选择器属性
参数 | 说明 | 类型 | 可选值 | 默认值 |
value / v-model | 绑定值 | date(DateTimePicker) / array(DateTimeRangePicker) | 无 | 无 |
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/dates/ week/datetime/datetimerange/ daterange/monthrange | date |
format | 显示在输入框中的格式 | string | 见日期格式 | yyyy-MM-dd HH:mm:ss |
align | 对齐方式 | string | left / center / right | left |
popper-class | DateTimePicker下拉框的类名 | string | 无 | 无 |
picker-options | 当前时间日期选择器特有的选项参考下表 | object | 无 | {} |
range-separator | 选择范围时的分隔符 | string | 无 | '-' |
default-value | 可选, 选择器打开时默认显示的时间 | Date | 可被new Date()解析 | 无 |
default-time | 选中日期后的默认具体时刻 | 非范围选择时: string / 范围选择时: string[] | 非范围选择时: 形如12:00:00的字符串; 范围选择时: 数组, 长度为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 |
1.4. Picker Options
参数 | 说明 | 类型 | 可选值 | 默认值 |
shortcuts | 设置快捷选项, 需要传入{ text, onClick }对象用法参考demo或下表 | Object[] | 无 | 无 |
disabledDate | 设置禁用状态, 参数为当前日期, 要求返回Boolean | Function | 无 | 无 |
cellClassName | 设置日期的className | Function(Date) | 无 | 无 |
firstDayOfWeek | 周起始日 | Number | 1到7 | 7 |
1.5. Shortcuts
参数 | 说明 | 类型 | 可选值 | 默认值 |
text | 标题文本 | string | 无 | 无 |
onClick | 选中后的回调函数, 参数是vm, 可通过触发'pick'事件设置选择器的值。例如: vm.$emit('pick', new Date()) | function | 无 | 无 |
1.6. 事件
事件名称 | 说明 | 回调参数 |
change | 用户确认选定的值时触发 | 组件绑定值。格式与绑定值一致, 可受value-format控制 |
blur | 当input失去焦点时触发 | 组件实例 |
focus | 当input获得焦点时触发 | 组件实例 |
1.7. 方法
事件名称 | 说明 |
focus | 使input获得焦点 |
1.8. Slots
Name | 说明 |
range-separator | 自定义分隔符 |
2. DateTimePicker日期时间选择器例子
2.1. 使用脚手架新建一个名为element-ui-datetimepicker的前端项目, 同时安装Element插件。
2.2. 编写App.vue
<template>
<div id="app">
<h1>日期和时间点</h1>
<h4>通过设置type属性为datetime, 即可在同一个选择器里同时进行日期和时间的选择。快捷选项的使用方法与Date Picker相同。</h4>
<div style="display: inline-block;">
<span>默认: </span>
<el-date-picker v-model="val11" type="datetime" placeholder="选择日期时间"></el-date-picker>
</div>
<div style="display: inline-block; margin-left: 20px;">
<span>带快捷选项: </span>
<el-date-picker v-model="val12" type="datetime" placeholder="选择日期时间" align="right" :picker-options="po1"></el-date-picker>
</div>
<div style="display: inline-block; margin-left: 20px;">
<span>设置默认时间: </span>
<el-date-picker v-model="val13" type="datetime" placeholder="选择日期时间" default-time="12:00:00"></el-date-picker>
</div>
<h1>日期和时间范围</h1>
<h4>设置type为datetimerange即可选择日期和时间范围。</h4>
<div style="display: inline-block;">
<span>默认: </span>
<el-date-picker v-model="val21" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
</div>
<div style="display: inline-block; margin-left: 20px;">
<span>带快捷选项: </span>
<el-date-picker v-model="val22" type="datetimerange" :picker-options="po2" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right"></el-date-picker>
</div>
<h1>默认的起始与结束时刻</h1>
<h4>使用datetimerange进行范围选择时, 在日期选择面板中选定起始与结束的日期, 默认会使用该日期的00:00:00作为起始与结束的时刻; 通过选项default-time可以控制选中起始与结束日期时所使用的具体时刻。default-time接受一个数组, 数组每项值为字符串, 形如12:00:00, 其中第一项控制起始日期的具体时刻, 第二项控制结束日期的具体时刻。</h4>
<div style="display: inline-block;">
<span>起始日期时刻为12:00:00</span>
<el-date-picker v-model="val31" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['12:00:00']"></el-date-picker>
</div>
<div style="display: inline-block; margin-left: 20px;">
<span>起始日期时刻为12:00:00, 结束日期时刻为08:00:00</span>
<el-date-picker v-model="val32" type="datetimerange" align="right" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['12:00:00', '08:00:00']"></el-date-picker>
</div>
</div>
</template>
<script>
export default {
data () {
return {
val11: '',
val12: '',
val13: '',
po1: {
shortcuts: [{
text: '今天',
onClick (picker) {
picker.$emit('pick', new Date())
}
}, {
text: '昨天',
onClick (picker) {
const date = new Date()
date.setTime(date.getTime() - 3600 * 1000 * 24)
picker.$emit('pick', date)
}
}, {
text: '一周前',
onClick (picker) {
const date = new Date()
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
picker.$emit('pick', date)
}
}]
},
val21: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
val22: '',
po2: {
shortcuts: [{
text: '最近一周',
onClick (picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
picker.$emit('pick', [start, end])
}
}, {
text: '最近一个月',
onClick (picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
picker.$emit('pick', [start, end])
}
}, {
text: '最近三个月',
onClick (picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
picker.$emit('pick', [start, end])
}
}]
},
val31: '',
val32: ''
}
}
}
</script>
2.3. 运行项目