最近在使用elemnet-ui的日期选择器TimePicker与DatePicker 日期选择器,想要实现结束时间小开始时间,废话不多说,代码如下:
dataPicker时:
<el-date-picker
v-model="startTime"
type="date"
size="small"
:picker-options="startPickerOptions"
placeholder="开始时间">
</el-date-picker>
<el-date-picker
v-model="endTime"
type="date"
size="small"
:picker-options="endPickerOptions"
placeholder="结束时间">
</el-date-picker>
// 在data中声明的数据如下,开始时间默认为一个月之前
data () {
return {
startTime: new Date(new Date().setMonth((new Date().getMonth()-1))),
endTime: new Date(),
startPickerOptions: {
disabledDate: (time) => {
if (this.endTime != "") {
return time.getTime() > Date.now() || time.getTime() > this.endTime;
} else {
return time.getTime() > Date.now();
}
}
},
endPickerOptions: {
disabledDate: (time) => {
return time.getTime() < this.startTime || time.getTime() > Date.now();
}
},
}
},
效果图如下:
使用timePicker时当有两个时间框且结束时间小于开始时间,picker-options不是一个函数,因此使用change函数改变selectableRange的值。
TimePicker时:
<el-time-picker
v-model="time1"
placeholder="开始时间"
@change="changeStratTime"
:picker-options="{selectableRange:startTime}">
</el-time-picker>
<el-time-picker
v-model="time2"
placeholder="结束时间"
@change="changeEndTime"
:picker-options="{selectableRange:endTime}">
</el-time-picker>
//data中数据
data () {
return {
time1: '',
time2: '',
startTime:'',
endTime:''
}
},
//methods:
changeStratTime(item){
this.endTime = this.formatDateTime(item)+'-23:59:59'
},
changeEndTime(item){
this.startTime = '00:00:00-'+this.formatDateTime(item)
},
效果图如下: