题目有2个重点:1、可选范围为今天往前7天(含今天)2、只能选择7天内的任意一天
由此可知,用户选择的最大日期和最小日期为同一天,即只能选择一天,也就是说,使用了时间范围插件,但是model中的两个日期是同一天。
HTML:
<el-date-picker
class="datePicker"
v-model="params.dates"
type="daterange"
range-separator="-"
:start-placeholder="today"
:end-placeholder="today"
value-format="yyyy-MM-dd"
format="yyyy-MM-dd"
@change="changeParam_data"
@focus="resetMinDate"
v-show="routeName !== 'keySites' && routeName !== 'equipmentDetails'"
:picker-options="pickerOptions"
>
</el-date-picker>
data中设置相应的值:
data() {
return {
today:
new Date().getFullYear() +
"-" +
(new Date().getMonth() + 1) +
"-" +
new Date().getDate(),
pickerMinDate: "",
pickerOptions: {
disabledDate: (time) => {
//一天的毫秒数:60*60*24*1000*1 = 8.64e6
if (this.pickerMinDate !== "") {
// let maxTime = new Date(this.pickerMinDate).getTime()+1000*60*60*24;
let minTime = new Date(this.pickerMinDate).getTime();
let chooseTime = new Date(time).getTime();
return chooseTime > minTime || chooseTime < minTime;
} else {
return (
time.getTime() > Date.now() - 8.64e6 ||
time.getTime() <
new Date(new Date().getTime() - 60 * 60 * 1000 * 24 * 7)
);
}
},
onPick: ({ maxDate, minDate }) => {
this.pickerMinDate = minDate;
},
},
dateValue: "2022-01-01",
}
},
最后在method中设置相应的方法:(在第二次选择时清空时间值)
methods: {
resetMinDate() {
this.pickerMinDate = "";
},
},
如此,大功告成!