<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>