<el-form-item label="开始时间:">
<el-date-picker
v-model="listQuery.startDate"
type="datetime"
placeholder="选择日期时间"
format="yyyy-MM-dd HH:mm:ss"
value-format="yyyy-MM-dd HH:mm:ss"
:picker-options="pickerOptionsStart"
default-time="00:00:00"
/>
</el-form-item>
<el-form-item label="结束时间:">
<el-date-picker
v-model="listQuery.endDate"
type="datetime"
placeholder="选择日期时间"
format="yyyy-MM-dd HH:mm:ss"
value-format="yyyy-MM-dd HH:mm:ss"
:picker-options="pickerOptionsEnd"
default-time="23:59:59"
/>
</el-form-item>
<!-- 两个单个的日期时间选则器 --!>
value-format:用来转换日期格式
default-time:用来设定默认时间
:picker-options:用来限定前后两个日期选择范围问题---》前一个日期限定之后,后一个不能再选之前的----》data中参数写法
pickerOptionsStart: {
disabledDate: time => {
if (this.listQuery.endDate) {
return time.getTime() > new Date(this.listQuery.endDate).getTime()
}
}
},
pickerOptionsEnd: {
disabledDate: time => {
if (this.listQuery.startDate) {
return time.getTime() < new Date(this.listQuery.startDate).getTime()
}
}
}
将以这两个绑定的参数放入data中即可实现
点击日期输入框里面的清除按钮之后,这是绑定的数据就是null了,需要注意
下面是解决点击清除按钮绑定数据是null的方法:
watch:{
'listQuery': {//解决elementui时间插件清空后值为null的问题
handler(newName, oldName) {
//newVal是指更新后的数据
//oldName是指更新之前的数据
newName.startDate == null ? this.listQuery.startDate = "" : this.listQuery.startDate = this.listQuery.startDate;
newName.endDate == null ? this.listQuery.endDate = "" : this.listQuery.endDate = this.listQuery.endDate;
},
deep: true,
immediate: true
}
},
可以用watch监听数据后改变null