general
After <el-date-picker /> will use start date and end date, end date before the start date, in fact, the selected date, end date is greater than the start date is not optional, gray and empathy first election end date and then choose the start date, the start date can not be later cut-off date of the election.
code show as below:
1, the starting date:
<el-form-item
label = "Valid From"
prop="title"
>
<el-date-picker
v-model="info.startDate"
type="date"
placeholder = "Select Date"
:picker-options="pickerIssueOptions"
size="mini"
style="width:100%;height:30px"
format = "yyyy Year MM Month dd Day"
value-format="yyyy-MM-dd"
/>
2. Deadline:
<el-form-item
label = "Expiration Date"
prop="title"
>
<el-date-picker
v-model="info.endDate"
type="date"
placeholder = "Select Date"
:picker-options="pickerExpireOptions"
size="mini"
style="width:100%;height:30px"
format = "yyyy Year MM Month dd Day"
value-format="yyyy-MM-dd"
/>
Then mainly for the operation of the picker-options:
Write in data
pickerIssueOptions: {
disabledDate: (time) => {
if (!this.info.endDate) { return false }
return time.getTime() > new Date(this.info.endDate.replace(/-/g, '/')).getTime()
}
},
pickerExpireOptions: {
disabledDate: (time) => {
if (!this.info.startDate) { return false }
return time.getTime() < new Date(this.info.startDate.replace(/-/g, '/')).getTime()
}
},
Can, if inside the attention determination.