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//开始时间不选时，结束时间最大值大于等于当天
      }
    }
  }