日期选择器,可以自定义可选范围(示例为当天到365天内的范围)
代码如下:
<template>
<div>
<div>
<span>只能选择今天往后365天内的数据:</span>
<el-date-picker
v-model="valueDate"
type="daterange"
align="right"
unlink-panels
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
:picker-options="pickerOptions"
>
</el-date-picker>
</div>
</div>
</template>
<script>
export default {
data() {
return {
valueDate: "",
pickDate: "", //存储日期
pickerOptions: {
onPick: (pick) => {
this.pickDate = pick; //获取当前选择日期
},
disabledDate: (date) => {
const timeStamp = 24 * 60 * 60 * 1000; //1天的时间戳
const { minDate, maxDate } = this.pickDate;
if (date.getTime() < Date.now() - timeStamp) {
//选择今天及以后的日期(如果不需要从今天开始,只需要控制范围,这个判断去掉即可)
return true;
} else if (minDate && !maxDate) {
// 日期范围控制在365天内
const tamp = Math.abs(minDate.valueOf() - date.valueOf());
const customTimeStamp = timeStamp * 365; //自定义天数
if (tamp > customTimeStamp) {
return true;
}
}
},
},
};
},
};
</script>