//开始日期至结束日期
<el-form-item label="生效时间:" >
<el-date-picker
v-model="value2"
type="datetimerange"
value-format="yyyy-MM-dd HH:mm:ss"
:picker-options="pickerOptions"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="defaultTime"
align="right">
</el-date-picker>
</el-form-item>
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]);
}
}]
},
computed: {
defaultTime() {
var date = new Date();
var hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();
let time=[];
time.push(`${hour}:${minute}:${second}`)
time.push(`${hour}:${minute}:${second}`)
return time;
}
},
清空bug处理
在使用DatePicker日期选择器选择日期范围的时候,会用到一个属性clearable。这个属性是Boolean变量,用于决定是否显示清除按钮,默认为true。
<el-date-picker
v-model="value"
type="daterange"
:clearable="true"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
data(){
return {
value:[]
}
}
- 当点击清除按钮后,再次输出value,就会发现这种报错信息:
出现这种情况的原因是: 当点击清除按钮的时候,value会被设置为null。
Element-ui中没有内置清除按钮的回调函数。因此要解决这个bug,我使用的方法是在下次调用之前,为value重新赋值,即:
if (!this.value) {
this.value = []
}