1. Limit time

<el-select V-model ="form.plan" placeholder=" placeholder "@change="onChangePlan"> <el-option v-for="item in planList" :key="item.planId" :label="item.planName" :value="item.planId"/> </el-select> </el-form-item> <el-date-picker V-model ="form.startDate" value-format="timestamp" :editable="false" // Text optional type="date" Placeholder =" Please select start time ":picker-options="datePickerOptions" />Copy the code
Export default {data () {return {form:{id:1, // search id}, planList: PlanTimeList: {startDate: null, // The timestamp of the start of a plan endDate: Null, // timestamp of the end of a plan}, // datePickerOptions: {disabledDate: (time) => { return this.dealDisabledDate(time) }, }, } }, },Copy the code
OnChangePlan (){const res = this.planlist.find (x => xid === this.form.id) Enclosing planTimeList. StartDate = res. StartDate enclosing planTimeList. EndDate = res., endDate} / / judgment to choose the time / / 1 is prohibited. When the end time, optional dealDisabledDate time now at the end of the start time - time (time) {if (this. PlanTimeList. EndDate) {/ / the beginning of the period before the current date, if the plan is only in the day and after selection, The day before the Date can't choose the if (Date. Now () > enclosing planTimeList. StartDate) {/ / current time > a plan at the beginning of time / / yesterday - optional range - return over time This. PlanTimeList. EndDate < time. GetTime () | | time. GetTime () < Date. Now () - 8.64 e7} else {/ / start time - optional range - return over time this.planTimeList.endDate < time.getTime() || time.getTime() < this.planTimeList.startDate } // 2. When no end time, after the start time can choose} else {return time. GetTime () < this. PlanTimeList. StartDate}}}Copy the code

2. The current time > Start time is displayed

:disabled="!! source&&new Date().valueOf() > source.startDate"Copy the code
  • Source indicates the command output