element-ui⽇期组件DatePicker设置⽇期选择范围PickerOptions element-UI提供了DatePicker⽇期选择器组件，可以让我们很⽅便的获取到⽇期，默认的选择是全部的⽇期都可以选择的，但是很多场景中我们要对⽇期选择范围做限定,⽐如出⾏⽇期就不能选过去的⽇期，订票时间要限制⽇期范围
官⽹提供了picker-options参数可以设置⽇期选择范围，具体操作看代码// 页⾯引⼊组件, 加上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: {}, // ⽇期设置对象
}
},
created {
// disabledDate 为true表⽰不可选,false表⽰可选
this.pickerOptions.disabledDate = disabledDate (time) {
// 设置可选择的⽇期为今天之后的⼀个⽉内
let curDate = (new Date()).getTime()
// 这⾥算出⼀个⽉的毫秒数，这⾥使⽤30的平均值，实际中应根据具体的每个⽉有多少天计算
let day = 30 * 24 * 3600 * 1000
let dateRegion = curDate + day
Time() < w() - 8.64e7 || Time() > dateRegion
// 设置选择的⽇期⼩于当前的⽇期,⼩于返回true,⽇期不可选
// Time() < w() - 8.64e7
},
}
看⼀下应⽤的效果, 可选范围⼀个⽉,8是当前⽇期
可选范围今天及之后的⽇期
⽅法补充说明: 上⾯的写法是之前整理的，写的⽐较随意，在项⽬中这样写不太好，下⾯写⼀个详细版
// 页⾯引⼊组件, 加上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) => {
// 如果函数处理⽐较简单，可以直接在这⾥写逻辑⽅法
// Time() < w() - 8.64e7
// 如果函数⾥处理的数据⽐较⿇烦，也可以单独放在⼀个函数⾥，避免data数据太臃肿
return this.dealDisabledDate(time)
}
}, // ⽇期设置对象
}
},
created {
},
methods: {
// 单独处理时间的函数
dealDisabledDate (time) {
// Time是把选中的时间转化成⾃1970年1⽉1⽇ 00:00:00 UTC到当前时间的毫秒数
// w()是把今天的时间转化成⾃1970年1⽉1⽇ 00:00:00 UTC到当前时间的毫秒数，这样⽐较好⽐较
// return的值,true是不可以操作选择,false可以操作选择,⽐如下⾯这个判断就只能选择今天之后的时间
js当前日期加一天Time() < w()
// 这⾥减8.64e7的作⽤是，让今天的⽇期可以选择，如果不减的话，今天的⽇期就不可以选择，判断中写<= 也是没⽤的,⼀天的毫秒数就是8.64e7 // Time() <= w()
// Time() < w() - 8.64e7
}
}
这样写了，看着应该更清晰⼀些吧

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。