elementui 日期选择器设置当前默认日期(picker-options),以及当前日期以后的无法选择(default-value)

时间:2023-03-10 05:25:11
elementui  日期选择器设置当前默认日期(picker-options),以及当前日期以后的无法选择(default-value)

目前官方的日期默认是当前日期,打开之后长这样子:现在是三月13日,但是有的需求是当前日期在后面。

elementui  日期选择器设置当前默认日期(picker-options),以及当前日期以后的无法选择(default-value)

就像这样:

elementui  日期选择器设置当前默认日期(picker-options),以及当前日期以后的无法选择(default-value)

代码如下:

default-value是设置当前日期默认值的。"timeDefaultShow"是在data里面的值,而不是方法。
<el-date-picker
v-model="pickerDate"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
:picker-options="pickerBeginDateBefore"
:default-value="timeDefaultShow"
end-placeholder="结束日期"
size="small"
class="margin-right-10">
</el-date-picker>
data() {
return {
pickerBeginDateBefore:{
disabledDate(time) {
return time.getTime() > Date.now();
}
},
timeDefaultShow:'',
}
}

在created或mounted(也就是页面第一次加载时)更新timeDefaultShow:

上个月的当前日期为默认值

that.timeDefaultShow = new Date();
that.timeDefaultShow.setMonth(new Date().getMonth() - 1);

打开就是上面的效果了。

再说当前日期后面的日期不能选择:

(上面代码中有这句话)pickerBeginDateBefore也是一个值。附上官网链接(第一个例子里面有该方法):日期选择器