The Element UI date component is used in a variety of scenarios, to name a few requirements that have been encountered recently
Default displays the date of a week (starting today). The date before the specified date is not selectable. The date after today is not selectable
<el-form :inline="true" :model="deviceFormData" ref="deviceFormData" class="hardware-form" > <el-form-item "> <el-date-picker V-model ="deviceFormData.time" type="daterange" range-separator=" to" Start-placeholder =" start date "end-placeholder=" end date" :picker-options="pickerOptions" format=" YYYY-MM-DD" Value-format =" YYYY-MM-DD "@change="handleDate" > </el-date-picker> </el-form-item> </el-form> data (){return {// Default date DeviceFormData: {time: []}, paramsDate: {cpclrqS: null, // Start date cpclrqE: null // end date}, // Control optional dates pickerOptions: { disabledDate: time => { let date2020 = new Date("2020/05/31 23:59:59").getTime(); // Return is not optional before the current date. (date2020 < time.getTime() && time.getTime() < Date.now()); }}}}, methods:{// Default date getTimeFn() {const that = this; const end = new Date(); const start = new Date(); start.setTime(start.getTime() - 3600 * 1000 * 24 * 7); // n days * n that. Deviceformdata. time[0] = that. that.deviceFormData.time[1] = that.formatDate(end); this.paramsDate.cpclrqS = that.deviceFormData.time[0]; this.paramsDate.cpclrqE = that.deviceFormData.time[1]; }},Copy the code