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