element ui 日期选择器 日期选择范围限制 周末限制

element ui 日期选择器 日期选择范围限制 周末限制

需求：开始日期与结束日期间隔4天，跳过周末

html

    <el-date-pickerv-model="startTime"type="date"placeholder="选择开始日期时间"@change="changeTime(startTime)"format="yyyy-MM-dd"></el-date-picker><span>——</span><el-date-pickerv-model="endTime"type="date"placeholder="选择结束日期时间":picker-options="endPickerOptions"format="yyyy-MM-dd":disabled="isDisabled"></el-date-picker>

js

1.选择开始日期之后触发，对结束日期进行限制

//更新时间值changeTime(value, type) {// 清空一个框。所有的都清空if (!value) {this.startTime = "";dTime = "";this.isDisabled = true;return;}dTime = "";// 计算最大时间this.maxTime = Time();//间隔4天，需要循环5次，第五天00:00后可选择for (let day = 1; day <= 5; day++) {this.maxTime = this.calculateNextMaxTime(this.maxTime);}this.defaultMaxDate = this.dPickerOptions = {disabledDate: (time) => {Time() < this.maxTime;},};},

2.间隔时间计算

    //计算禁用日期calculateNextMaxTime(startTime) {var maxTime  = null;maxTime  = startTime + 24 * 60 * 60 * 1000; //一天的毫秒数//判断是否为周末if (this.isRestDay(maxTime)) {return this.calculateNextMaxTime(maxTime);}return maxTime ;},

3.判断周末

    //判断是否为周末isRestDay(time) {return (new Date(time).getDay() === 6 || new Date(time).getDay() === 0) ;},