el-data-picker 結束日期不能小於開始日期


<template>
    <el-form :model="project">
        <el-form-item>
            <el-col :span="11">
                <el-date-picker
                  size="mini"
                  v-model="project.planDateSta"
                  value-format="yyyy-MM-dd"
                  type="data"
                  placeholder="開始日期"
                  autocomplete="off"
                  style="width: 100%"
                  // data中調用
                  :picker-options="pickerOptionsStart"
                ></el-date-picker>
            </el-col>
            <el-col style="text-align: center" :span="2">-</el-col>
            <el-col :span="11">
                <el-date-picker
                  size="mini"
                  v-model="project.planDateEnd"
                  value-format="yyyy-MM-dd"
                  type="data"
                  align="right"
                  placeholder="結束日期"
                  autocomplete="off"
                  style="width: 100%"
                  :picker-options="pickerOptionsEnd"
                ></el-date-picker>
            </el-col>
        </el-form-item>
    </el-form>
</template>
<script>
export default {
    data() {
        return {
            // 開始日期 :picker-options 中引用
            pickerOptionsStart: {
                disabledDate: time => {
                    // 獲取結束日期的 v-model 值並賦值給新定義的對象
                    let endDateVal = this.project.planDateEnd;
                    if (endDateVal) {
                        // 比較 距 1970 年 1 月 1 日之間的毫秒數:
                        return time.getTime() > new Date(endDateVal).getTime();
                    }
                }
            },
            // 結束日期 :picker-options 中引用
            pickerOptionsEnd: {
                disabledDate: time => {
                    // 獲取開始日期的 v-model 值並賦值給新定義的對象
                    let beginDateVal = this.project.planDateSta;
                    if (beginDateVal) {
                        // 比較 距 1970 年 1 月 1 日之間的毫秒數:
                        return time.getTime() < new Date(beginDateVal).getTime() - 1 * 24 * 60 * 60 * 1000
                    }
                }
            }
        }
    }
}
</script>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM