vue.js - vue+elementUI 关于日期选择器的disabledDate问题

问题描述

问 题

---

网申开始时间左边的日期选择器选择17-02-04，我想右边的日期选择器的02-04之前的天数不可点击。用elementUI的date日期选择提供的disabledDate方法，限制日期不可点击。
现在的问题是不知道怎么去获取左边日期选择器的变量jobQueryForm.beginDateBefore？
按照elementUI提供的代码方式写，获取不到jobQueryForm.beginDateBefore的变量，改用computed方式获取this.jobQueryForm.beginDateBefore,结果disabledDate方法没有效果。

HTML:

<el-col :span="8">
    <el-form-item label="网申开始时间" class="jq-date-group">
        <el-col :span="11">
            <el-form-item prop="beginDateBefore">
                <el-date-picker
                    type="date"
                    placeholder="选择日期"
                    :editable="false"
                    v-model="jobQueryForm.beginDateBefore"
                    format="yy-MM-dd"
                    :picker-options="pickerBeginDateBefore">
                </el-date-picker>
            </el-form-item>
        </el-col>
        <el-col class="line" :span="2" style="padding:1px 0 0 2px;">至</el-col>
        <el-col :span="11">
            <el-form-item prop="beginDateAfter">
                <el-date-picker
                    type="date"
                    placeholder="选择日期"
                    :editable="false"
                    v-model="jobQueryForm.beginDateAfter"
                    format="yy-MM-dd"
                    :picker-options="pickerBeginDateAfter"
                    style="float:right;">
                </el-date-picker>
            </el-form-item>
        </el-col>
    </el-form-item>
</el-col>

VUE:

export default {
    data() {
        return {
            jobQueryForm: {
                beginDateBefore: '',
                beginDateAfter: '',
                overDateBefore: '',
                overDateAfter: ''
            },
            pickerBeginDateBefore:{
                disabledDate(time) {
                    console.log('111');
                    return time.getTime() > Date.now();
                }
            },
            pickerBeginDateAfter:{
                disabledDate(time) {
                    return time.getTime() > Date.now();
                }
            }
        }
    }
}

解决方案

pickerBeginDateBefore: {

disabledDate: (time) => {
    let beginDateVal = this.addJobForm.beginDate;
    if (beginDateVal) {
        return time.getTime() < beginDateVal;
    }
}

}

函数改为箭头函数，this指向问题

这篇关于vue.js - vue+elementUI 关于日期选择器的disabledDate问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！