美文网首页
element日期选择器开始时间不能大于结束时间

element日期选择器开始时间不能大于结束时间

作者: 有你有团 | 来源:发表于2019-11-25 20:49 被阅读0次

    element 的日期选择器组件提供给我们很好的日期选择控件,有很强大的功能,因为在它自己封装好的关于时间范围组件,有时候不满足我们的需求,所以我们需要自己封装

    看官网介绍date-picker
    这是我们需要的样式

    date.png date.png

    有一个属性非常重要,我们可以根据这个属性去达到功能

    1. 这里有一点要注意,如果使用了value-format="yyyy-MM-dd"去格式日期显示方式,那么就无法达到判断,如果要返回yyyy-MM-dd格式,自己写一个方法去格式化
    2. 网上有很多关于时间限制的例子,但是有一个问题就是开始和结束都选择,在删除开始就无法选择,现在这种方法去实现就没有这种bug
    //html
    <div class="time-select-input">
                <el-date-picker v-model="starTime" type="date" placeholder="选择开始日期" :picker-options="pickerOptions0"></el-date-picker>
                <div style="width:16px;height:2px;background:#888888;margin:0 15px"></div>
                <el-date-picker v-model="endTime" type="date" placeholder="选择结束日期" :picker-options="pickerOptions1"></el-date-picker>
            </div>
    
    //js
     data(){
            return {
                starTime:'',
                endTime:'',
                pickerOptions0: {
                    disabledDate: (time) => {
                        if (this.endTime) {
                            return time.getTime() > this.endTime
                        }
     
                    }
                },
                pickerOptions1: {
                    disabledDate: (time) => {
                        if(this.starTime){
                            return time.getTime() < this.starTime
                        }
                    }
                },
            }
        },
    
    

    希望对大家有用!

    相关文章

      网友评论

          本文标题:element日期选择器开始时间不能大于结束时间

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