美文网首页
Element时间控件限制时间选择范围

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

作者: 清哥1992 | 来源:发表于2019-02-22 10:43 被阅读0次

    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();
                        }
                    }
                }
            },
        }
    
    

    相关文章

      网友评论

          本文标题:Element时间控件限制时间选择范围

          本文链接:https://www.haomeiwen.com/subject/qgusyqtx.html