vue element-ui 日期选择器el-date-picker设置开始日期和结束日期的选择区间


<el-form-item label="项目开始日:" prop="F_StartDate" :rules="{ required: false, message: '请输入项目开始日', trigger: 'blur' }">
                                <el-date-picker v-model="form.F_StartDate"
                                                type="date"
                                                size="small"
                                                placeholder="选择项目开始日"
                                                value-format="yyyy-MM-dd"
                                                 :picker-options="pickerBeginDateBefore"
                                                style="width: 100%;">
                                </el-date-picker>
                            </el-form-item>
<el-form-item label="项目截止日:" prop="F_EndDate" :rules="{ required: false, message: '请输入项目截止日', trigger: 'blur' }">
                                <el-date-picker v-model="form.F_EndDate"
                                                type="date"
                                                size="small"
                                                placeholder="选择项目截止日"
                                                value-format="yyyy-MM-dd"
                                                 :picker-options="pickerBeginDateAfter"
                                                style="width: 100%;">
                                </el-date-picker>
                            </el-form-item>
data: {
        pickerBeginDateBefore: {
            disabledDate: time => {
                let endDate = vm.form.F_EndDate;
                let beginDateVal = new Date(endDate);
                if (endDate) {
                    return time.getTime() > beginDateVal;
                }
            }
        },
        pickerBeginDateAfter: {
            disabledDate: time => {
                let startDate = vm.form.F_StartDate;
                let beginDateVal = new Date(startDate);
                if (startDate) {
                    return time.getTime() < beginDateVal - 3600 * 1000 * 24 * 1;
                }
            }
        },
}
 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM