element-ui 的时间选择器 el-date-picker

2019-12-27  本文已影响0人  看庭前花开花落_望天上云卷云舒
最终实现效果:

选择了开始时间,再选择结束时间的时候就不能早于开始时间;
选择了结束时间,再选择开始时间的时候就不能晚于结束时间;


1.png 2.png
实现代码:
<template>
   <el-date-picker
          type="date"
          placeholder="选择开始日期"
          v-model="beginTime"
          value-format="yyyy-MM-dd"
          :picker-options="pickerTimeBeg">
   </el-date-picker>
   -
   <el-date-picker
          type="date"
          placeholder="选择结束日期"
          v-model="endTime"
          value-format="yyyy-MM-dd"
          :picker-options="pickerTimeEnd">
  </el-date-picker>
</template>
<script>
export default {
    data() {
        return{
            beginTime:"",
            endTime:"",
            pickerTimeBeg: { //限制开始时间
                disabledDate: (time) => {
                    if (this.endTime != '' && this.endTime) {
                        let timeStr = new Date(this.endTime.replace(/-/g, '/'));
                        return time.getTime() > timeStr;
                    } else {
                        return ''
                    }
                }
            },
            pickerTimeEnd: { //限制结束时间
                disabledDate: (time) => {
                    if (this.beginTime != '' && this.beginTime) {
                        let timeStr = new Date(this.beginTime.replace(/-/g, '/'));
                        return time.getTime() < timeStr;
                    } else {
                        return ''
                    }
                }
            }
        }
    }
}
</script>
上一篇 下一篇

猜你喜欢

热点阅读