element UI 日期组件应用场景比较多,举几个最近遇到的需求
默认显示一周的日期(今天开始) 指定日期之前不可选,今天及以后日期不可选
<el-form
:inline="true"
:model="deviceFormData"
ref="deviceFormData"
class="hardware-form"
>
<el-form-item label="产品成立日:">
<el-date-picker
v-model="deviceFormData.time"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
:picker-options="pickerOptions"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
@change="handleDate"
>
</el-date-picker>
</el-form-item>
</el-form>
data (){
return {
// 默认日期
deviceFormData: {
time: []
},
paramsDate: {
cpclrqS: null, //开始日期
cpclrqE: null //结束日期
},
//控制可选日期
pickerOptions: {
disabledDate: time => {
let date2020 = new Date("2020/05/31 23:59:59").getTime();//当前日期之前不可选
return !(date2020 < time.getTime() && time.getTime() < Date.now());
}
}
}
},
methods:{
// 默认日期
getTimeFn() {
const that = this;
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);// n天 * n
that.deviceFormData.time[0] = that.formatDate(start);
that.deviceFormData.time[1] = that.formatDate(end);
this.paramsDate.cpclrqS = that.deviceFormData.time[0];
this.paramsDate.cpclrqE = that.deviceFormData.time[1];
},
}