一般
<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里面的判断。