End element-ui date-picker set equal to the start time is greater than the start time and the end time or less time

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
                            }
                       }
             },
        }
   }
}

 

Part.3 effect

 

 

Guess you like

Origin www.cnblogs.com/langxiyu/p/11076289.html