如上图所示,当前日期是8月份,需求要求9月份就不要显示了,不友好,并且当前日期后面的不可点击
效果如下图:
需要设置default-value默认值
代码如下:
<el-date-picker
v-model="date"
type="daterange"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
:picker-options="pickerOptions"
prefix-icon="el-icon-date"
value-format="yyyy-MM-dd"
clear-icon="el-icon-close "
:clearable="true"
:default-value="timeDefaultShow"
>
</el-date-picker>
return {
// 日期便捷选择
pickerOptions: {
shortcuts: [
{
text: "近七天",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit("pick", [start, end]);
},
},
{
text: "近一个月",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit("pick", [start, end]);
},
},
{
text: "近三个月",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
picker.$emit("pick", [start, end]);
},
},
],
disabledDate: (time) => {
return time.getTime() > Date.now();
},
},
timeDefaultShow:'',
}
在mounted里添加如下代码
this.timeDefaultShow = new Date();
this.timeDefaultShow.setMonth(new Date().getMonth() - 1);