element 日期选择器限制时间
复制代码
// 页面引入组件, 加上picker-options这个参数
<el-date-picker
v-model="exCheckDate"
type="date"
:picker-options="pickerOptions"
value-format="yyyy-MM-dd"
placeholder="Please select">
</el-date-picker>
// js中定义范围
// picker-options的值是一个对象,他的disabledDate属性可以设置禁用日期
data () {
return {
pickerOptions: {
// disabledDate是一个函数,参数是当前选中的日期值,这个函数需要返回一个Boolean值,
disabledDate: (time) => {
// 如果函数处理比较简单,可以直接在这里写逻辑方法
// return time.getTime() < Date.now() - 8.64e7
// 如果函数里处理的数据比较麻烦,也可以单独放在一个函数里,避免data数据太臃肿
return this.dealDisabledDate(time)
}
}, // 日期设置对象
}
},
created {
},
methods: {
// 单独处理时间的函数
dealDisabledDate (time) {
// time.getTime是把选中的时间转化成自1970年1月1日 00:00:00 UTC到当前时间的毫秒数
// Date.now()是把今天的时间转化成自1970年1月1日 00:00:00 UTC到当前时间的毫秒数,这样比较好比较
// return的值,true是不可以操作选择,false可以操作选择,比如下面这个判断就只能选择今天之后的时间
return time.getTime() < Date.now()
// 这里减8.64e7的作用是,让今天的日期可以选择,如果不减的话,今天的日期就不可以选择,判断中写<= 也是没用的,一天的毫秒数就是8.64e7
// return time.getTime() <= Date.now()
// return time.getTime() < Date.now() - 8.64e7
}
}
复制代码