element UI+vue关于日期范围选择的操作,picker-options属性的使用
一般
<el-date-picker />使用会出现起始日期和结束日期,结束日期不能早与起始日期,选择了其实日期后,结束日期大于起始日期的不可选,置灰,同理先选结束日期后再选起始日期,那么起始日期不能选截止日期后面的。
代码如下:
1,起始日期:
<el-form-item
label="有效起始日期"
prop="title"
>
<el-date-picker
v-model="info.startDate"
type="date"
placeholder="选择日期"
:picker-options="pickerIssueOptions"
size="mini"
style="width:100%;height:30px"
format="yyyy 年 MM 月 dd 日"
value-format="yyyy-MM-dd"
/>
2,截止日期:
<el-form-item
label="有效截止日期"
prop="title"
>
<el-date-picker
v-model="info.endDate"
type="date"
placeholder="选择日期"
:picker-options="pickerExpireOptions"
size="mini"
style="width:100%;height:30px"
format="yyyy 年 MM 月 dd 日"
value-format="yyyy-MM-dd"
/>
然后主要是针对picker-options的操作:
在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()
}
},
即可,注意if里面的判断。
长风破浪会有时,直挂云帆济沧海