Element时间控件限制时间选择范围

2019-02-22  本文已影响0人  清哥1992

Eleement范围时间选择,限制选择范围值,以下设置范围为一年


<el-form-item label="受理时间">
    <el-date-picker
        clearable
        :picker-options="pickerOptions_start"
        v-model="QueryForm.fwqqkssj"
        type="date"
        placeholder="选择日期">
     </el-date-picker>
</el-form-item>
<el-form-item label="至">
    <el-date-picker
        clearable
        :picker-options="pickerOptions_end"
        v-model="QueryForm.fwqqjssj"
        type="date"
        placeholder="选择日期">
        </el-date-picker>
</el-form-item>


data() {
    return {
        pickerOptions_start: this.set_kssj_disabledDate(),
        pickerOptions_end: this.set_jssj_disabledDate(),
    }
}

methods:{
    set_kssj_disabledDate(){
        let _this = this;
        return {
            disabledDate:(time) => {
                if(_this.QueryForm['fwqqjssj']){
                    let y = _this.QueryForm['fwqqjssj'].getFullYear()-1;
                    let m = _this.QueryForm['fwqqjssj'].getMonth() + 1;
                    let d = _this.QueryForm['fwqqjssj'].getDate();
                    return time.getTime() > _this.QueryForm['fwqqjssj'] ||               time.getTime() < new Date(y +'/'+ m +'/' + '/' + d);
                }else{
                    return time.getTime() > Date.now();
                }
             }
         }
    },
    set_jssj_disabledDate(){
        let _this = this;
            return {
                disabledDate:(time) => {
                    if(_this.QueryForm['fwqqkssj']){
                        let y = _this.QueryForm['fwqqkssj'].getFullYear() + 1;
                        let m = _this.QueryForm['fwqqkssj'].getMonth() + 1;
                        let d = _this.QueryForm['fwqqkssj'].getDate();
                        //time.getTime为当前所点时间控件的时间值,返回true的时间则为禁止选择状态
                        return time.getTime() < _this.QueryForm['fwqqkssj'] || time.getTime() > new Date(y +'/'+ m +'/' + '/' + d);
                    }else{
                        return time.getTime() > Date.now();
                    }
                }
            }
        },
    }

上一篇下一篇

猜你喜欢

热点阅读