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

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

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

date.png

element日期选择器开始时间不能大于结束时间_第1张图片
date.png

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

  1. 这里有一点要注意,如果使用了value-format="yyyy-MM-dd"去格式日期显示方式,那么就无法达到判断,如果要返回yyyy-MM-dd格式,自己写一个方法去格式化
  2. 网上有很多关于时间限制的例子,但是有一个问题就是开始和结束都选择,在删除开始就无法选择,现在这种方法去实现就没有这种bug
//html
//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日期选择器开始时间不能大于结束时间)