自定义指令控制 element-ui 日期组件的选择范围

前言

平时我们经常会给日期控件加一个日期范围的限制,比如开始日期必须大于结束日期, 结束日期必须小于开始日期。

• 这个也不难,element-ui的日期组件有一个picker-options的参数,然后里面有个disabledDate

如果日期组件较多,需要控制范围的也较多的话,那么给每个日期组件都去设置一个picker-options的参数,代码就有点冗余了,所以写了一个自定义指令,来控制日期范围

/*
 * 日期范围控制指令
 */

const minDateFunc = (el, binding, vnode) => {
    if (binding.value === binding.oldValue) {
        return;
    }
    if (!binding.value) {
        vnode.child.pickerOptions.disabledDate = function () {
            return false;
        };
        return;
    }
    vnode.child.pickerOptions.disabledDate = function (date) {
        const TIME = 86400000;
        return date && date.valueOf() <= new Date(binding.value).valueOf() - TIME;
    };
};

const maxDateFunc = (el, binding, vnode) => {
    if (binding.value === binding.oldValue) {
        return;
    }
    if (!binding.value) {
        vnode.child.pickerOptions.disabledDate = function () {
            return false;
        };
        return;
    }
    vnode.child.pickerOptions.disabledDate = function (date) {
        return date && date.valueOf() >= new Date(binding.value).valueOf();
    };
};
export default {
    maxRange: {
        inserted: maxDateFunc,
        componentUpdated: maxDateFunc
    },
    minRange: {
        inserted: minDateFunc,
        componentUpdated: minDateFunc
    }
};

使用方法

1. 全局注册自定义指令

import rangeDate from './range-date/index.js';

Vue.directive('maxDate', rangeDate.maxRange);
Vue.directive('minDate', rangeDate.minRange);

2. 使用

<el-date-picker
    v-model="startDate"
    type="date"
    placeholder="选择日期" v-max-date="endDate"> </el-date-picker>

<el-date-picker
    v-model="endDate"
    type="date"
    placeholder="选择日期" v-min-date="startDate"> </el-date-picker>

注意: 该指令只能最大和最小日期限制不能同时作用于一个日期,这个有问题