Element DatePicker 日期选择器限定日期选择范围

最近工作当中遇到一个小问题,就是使用Element日期控件DatePicker的时候,当一个查询条件为日期区间,我要查两个月之间的数据,分别选择开始月和结束月,会出现一个问题,那就是结束月选的日期可以比开始月小,开始月选的日期可以比结束月大
就像这样
Element DatePicker 日期选择器限定日期选择范围_第1张图片
此时代码是这样写的

  • 开始月
  • 结束月
  • 要想选中开始月之后,选择结束月不能比开始月小,选中结束月之后,选择开始月不能比结束月大,只需加一个picker-options属性就可以了,在picker-options中加上disabledDate属性用于限制日期选择的范围
    代码如下

  • 开始月
  • 结束月
  • data中定义全局变量startMonthOption和endMonthOption
    Element DatePicker 日期选择器限定日期选择范围_第2张图片
    两个change方法如下

    //开始月日期控件点击时触发此方法
    selectStartMonth() {
    	this.endMonthOption = {
    		disabledDate: (time) => {
    			if(this.smonthdateVal != '') {
    				return time.getTime() < this.smonthdateVal;
    			}
    		}
    	};
    },
    //结束月日期控件点击时触发此方法
    selectEndMonth() {
    	this.startMonthOption = {
    		disabledDate: (time) => {
    			if(this.emonthdateVal != '') {
    				return time.getTime() > this.emonthdateVal;
    			}
    		}
    	};
    },
    

    效果如下图
    Element DatePicker 日期选择器限定日期选择范围_第3张图片
    Element DatePicker 日期选择器限定日期选择范围_第4张图片
    注:加picker-options属性之后日期控件的数据格式必须是日期格式,也就是不能加value-format=“yyyy-MM”,要想转换成字符串格式,只能后期通过方法转换,并且要保证每次执行change方法时,日期数据的格式都是日期格式,否则disabledDate属性不起作用

    你可能感兴趣的:(Vue)