美文网首页
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