美文网首页
element-ui 的时间选择器 el-date-picker

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

作者: 看庭前花开花落_望天上云卷云舒 | 来源:发表于2019-12-27 14:35 被阅读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>

相关文章

网友评论

      本文标题:element-ui 的时间选择器 el-date-picker

      本文链接:https://www.haomeiwen.com/subject/vlldoctx.html