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