vue elementui el-date-picker 单个输入框的
实现vue template 代码:
:picker-options=“pickerOptions” 便是限制选择时间的属性,在data中可以这样写
<el-date-picker
v-model="dateTimes"
type="monthrange"
format="yyyy-MM"
value-format="yyyy-MM"
range-separator="至"
start-placeholder="开始时间"
end-placeholder="结束时间"
@change="changeTime"
:picker-options="pickerOptions"
>
</el-date-picker>
script 代码
return {
dateTimes:'',//时间
starTime:'',//后台数据返回的开始时间2020-01
endTime:'',//后台数据返回的结束时间时间2020-12
pickerOptions:{
如果函数里处理的数据比较麻烦,也可以单独放在一个函数里,避免数据太臃肿
disabledDate:this.disabledDate
},
}
----------
methods: {
disabledDate(time){
// time 是一个new Date数据
return time.getTime() > new Date(this.endTime).getTime() || time.getTime() < new Date(this.starTime).getTime();
//时间范围必须是时间戳
这个return大致可以理解为time.getTime()就是里面的每个日期都会来遍及比较一遍,比接口返回的开始时间时间大,为true,禁止;比接口返回的结束时间时间小,为true,禁止。即日期选择器只会显示2020-01至2020-12的日期
},
}