Element UI——日期時間選擇器el-date-picker開始時間與結束時間約束解決方案

需求：el-table內容表內編輯。1，當結束時間不為空，開始時間不得大於結束時間。 2，當開始日期不為空，結束日期不得小於開始日期。

解決方案：el-date-picker組件需要 :picker-options屬性，屬性值為data,data的數據來自於methods中的方法

 

上代碼 👇

<el-table
        @row-click="rowClick"
        :data="tableData">
            <el-table-column
            label="Start Time">
                <template slot-scope="{row}">
                    <template v-if="row.edit">
                        <el-date-picker
                        size="small"
                        v-model="row.StartTime"
                        type="datetime"
                        placeholder=""
                        format="yyyy-MM-dd HH:mm:ss"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        default-time="00:00:00"
                        :picker-options="startDatePicker">
                        </el-date-picker>
                    </template>
                    <span v-else>{{ row.StartTime }}</span>
                </template>
            </el-table-column>
            <el-table-column
            label="End Time">
                <template slot-scope="{row}">
                    <template v-if="row.edit">
                        <el-date-picker 
                        size="small"
                        v-model="row.EndTime"
                        type="datetime"
                        placeholder=""
                        format="yyyy-MM-dd HH:mm:ss"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        default-time="00:00:00"
                        :picker-options="endDatePicker">
                        </el-date-picker>
                    </template>
                    <span v-else>{{ row.EndTime }}</span>
                </template>
            </el-table-column>
        </el-table>

export default {
        data() {
            return {
                startDatePicker: this.beginDate(),
                endDatePicker: this.processDate(),
                ActiveRow:{},//當前操作表格行數據
            }
        },
        methods:{
            rowClick(row, column, event){
                this.ActiveRow = row;
            },
            beginDate(){
                return {
                    disabledDate(time){
                    if (this.ActiveRow.EndTime) {  //如果結束時間不為空，則小於結束時間
                        return new Date(this.ActiveRow.EndTime).getTime() < time.getTime()
                    } else {
                        // return time.getTime() > Date.now()//開始時間不選時，結束時間最大值小於等於當天
                    }
                    }
                }
            },
            processDate() {
                return {
                    disabledDate(time) {
                    if (this.ActiveRow.StartTime) {  //如果開始時間不為空，則結束時間大於開始時間
                        return new Date(this.ActiveRow.StartTime).getTime() > time.getTime()
                    } else {
                        // return time.getTime() > Date.now()//開始時間不選時，結束時間最大值小於等於當天
                    }
                    }
                }
            }
    }
}

擴展方案

1、只可以選擇今天以及今天以后的時間：

pickerOptions: {
  disabledDate(time) {
    return time.getTime() < Date.now() - 8.64e7;//8.64e7=1000*60*60*24一天
  }
}

2、 只可以選擇今天以及今天以后 十五（n）天之內的時間：

pickerOptions: {
          disabledDate(time) {
            return time.getTime() < Date.now() - 8.64e7 || time.getTime() > Date.now() + 15 * 8.64e7;//8.64e7=1000*60*60*24一天
          }
}

3、 如果開始時間不為空，則結束時間大於開始時間,且大於當前時間：

processDate() {
  return {
    disabledDate(time) {
      if (this.ActiveRow.StartTime) {  //如果開始時間不為空，則結束時間大於開始時間,且大於當前時間
        return new Date(this.ActiveRow.StartTime).getTime() > time.getTime() || time.getTime() < Date.now() - 1000*3600*24
      } else {
        return time.getTime() < Date.now() - 1000*3600*24//開始時間不選時，結束時間最大值大於等於當天
      }
    }
  }