vue2 + el-date-picker限制时间选择范围
选择规定时间范围内的时间,即点击第一个时间的前后时间范围可选择,其余时间置灰不可选择
官网组件文档:https://element.eleme.cn/#/zh-CN/component/datetime-picker
限制时间选择范围的属性为:picker-options
html代码
javascript
<el-date-picker
v-model="dateTime"
type="datetimerange"
align="right"
range-separator="- "
start-placeholder="开始日期"
end-placeholder="结束日期"
:picker-options="pickerOptions"
@blur="isRestart = true"
value-format="yyyy-MM-dd HH:mm:ss"
:clearable="dateClear"
style="width:216px;">
</el-date-picker>
js代码
javascript
data(
return{
// 第一次选择时间---重置时间范围
isRestart: false,
pickerMinDate: '',
pickerOptions: {
onPick: ({
maxDate,
minDate,
}) => {
this.isRestart = false;
this.pickerMinDate = minDate.getTime();
if (maxDate) {
this.pickerMinDate = "";
}
},
disabledDate: (time) => {
if (this.pickerMinDate !== "") {
// 时间范围为31天,可根据自身需求更改时间范围
const one = 31 * 24 * 3600 * 1000;
const minTime = this.pickerMinDate - one;
const maxTime = this.pickerMinDate + one;
return time.getTime() < minTime || time.getTime() > maxTime;
}
},
},
}
)