type 数据显示类型
editable 文本框可输入
format 显示在输入框中的格式
value-format 可选，绑定值的格式。不指定则绑定值为 Date 对象
picker-options 当前时间日期选择器特有的选项参考下表
@change 用户确认选定的值时触发
@blur 当 input 失去焦点时触发
<el-form-item label="到期时间" label-width="120px">
<el-date-picker
ref="startTime"
v-model="form.startTime"
type="datetime"
size="mini"
:editable="false"
format="yyyy-MM-dd HH:mm:ss"
value-format="timestamp"
class="select-box"
placeholder="选择日期时间"
:picker-options="dateOption"
@change="handleStartTime"
@blur="startTimeBlur"
>
</el-date-picker>
</el-form-item>
data(){
return{
// 快捷选项需配置picker-options对象中的shortcuts，禁用日期通过 disabledDate 设置，传入函数
// disabledDate 设置禁用状态，参数为当前日期，要求返回 Boolean
dateOption: {
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);
}
}],
disabledDate: (time) => {
return time.getTime() < Date.now() - 1 * 24 * 3600 * 1000
}
},
form: {
startTime: null, // 生效时间 -1 表示立即生效
},
}
},
methods:{
// 选择时间
handleStartTime() {
console.log(this.form.startTime)
},
startTimeBlur() {
console.log(this.form.startTime)
},
}
选择日期范围
<template>
<div class="block">
<span class="demonstration">默认</span>
<el-date-picker
v-model="value1"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</div>
<div class="block">
<span class="demonstration">带快捷选项</span>
<el-date-picker
v-model="value2"
type="daterange"
align="right"
unlink-panels
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
:picker-options="pickerOptions">
</el-date-picker>
</div>
</template>
<script>
export default {
data() {
return {
pickerOptions: {
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]);
}
}]
},
value1: '',
value2: ''
};
}
};
</script>