Part.1 problem
date-picker assembly during use, the default is no time limit, you can easily select the interval, added the official document shortcut options, such as: one week in January Dian ...
But from the user experience, we hope to be beneficial to control time, after the beginning of time as we selected an optional end time interval should be greater than or equal to the start time, whereas empathy
Part.2 achieve
HTML
<el-date-picker v-model="startTime" type="datetime" placeholder="开始日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd" :picker-options="pickerOptionsStart" style="width:46%"> </el-date-picker> <span> 至 </span> <el-date-picker v-model="endTime" type="datetime"= "the MM-dd-YYYY" value-the format= "end date" placeholder format="yyyy-MM-dd" :picker-options="pickerOptionsEnd" style="width:46%"> </el-date-picker>
JS
export default { data() { return { startTime: '', endTime: '', pickerOptionsStart: { disabledDate: time => { if (this.endTime) { return time.getTime() > new Date(this.endTime).getTime() } } }, pickerOptionsEnd: { disabledDate: time => { if (this.selectObj.startTime) { return time.getTime() < new Date(this.startTime).getTime() - 86400000 } } }, } } }