需要使用element日期选择器(DatePicker 或 DateTimePicker)自带的 Picker Options的方法
以DateTimePicker 日期时间选择器为例
html:
<el-date-picker
v-model="Time"
type="daterange" //这里用的是datarange的选择类型
range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
:picker-options="pickerOptions" //绑定数据>
</el-date-picker>
js
此处的实例的可选择时间为当天到今年最后一天,可以在disabledDate里面自己定义。
data( ) {
return {
pickerOptions: {
disabledDate: (time) => {
//获取结束时间
let eTime = new Date();
eTime.setDate(0);
eTime.setMonth(11);
eTime.setHours(23);
eTime.setSeconds(59);
eTime.setMinutes(59);
let endTime = Date.parse(eTime)
return time.getTime() < Date.now() || time.getTime() > endTime ;//定义不可选时间
}
}
}
}
如果是动态的固定时间(有点拗口,就是可变化的固定时间)
return time.getTime() < new Date(this.timeVal)
// timeVal 可以是一个通过v-model 绑定的动态数据
如果是跟当天有关的固定时间区间(例如可选前后一周内的日期)
return time.getTime() < Date.now()-7*24*3600*1000 || time.getTime() > Date.now()+7*24*3600*1000;
//通过Date.now()确定当前时间,并用7*24*3600*1000这种毫秒定义不可选时间段
关于时间格式的转化,可以参考中国标准时间、‘yyyy-MM-dd’格式时间转为时间戳 - 爱喝酸奶的吃货 - 博客园