526互联

ElementUI-DateTimePicker时间限制

发布时间 2023-09-07 09:58:41作者: 飞飞乐园

需求

有两个时间控件，开始时间不能大于结束时间

<el-col :span="8">
                  <el-date-picker
                    v-model="queryParams.startDate"
                    size="small"
                    type="datetime"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    placeholder="请选择开始时间"
                    :picker-options="pickerOptionsStart"
                    clearable
                    @change="handle('start')"
                  />
                </el-col>
                <el-col :span="8" :offset="1">
                  <el-date-picker
                    v-model="queryParams.endDate"
                    size="small"
                    type="datetime"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    placeholder="请选择结束时间"
                    :picker-options="pickerOptionsEnd"
                    clearable
                    @change="handle('end')"
                  />
                </el-col>

js

pickerOptionsStart: {
        disabledDate: (time) => {
          if (this.queryParams.endDate) {
            return (
              time.getTime() > new Date(this.queryParams.endDate).getTime()
            );
          }
        },
      },
      pickerOptionsEnd: {
        disabledDate: (time) => {
          if (this.queryParams.startDate) {
            return (
              //小于开始日期的都禁止，只能选大于等于开始日期的
              time.getTime() < new Date(this.queryParams.startDate).getTime()
            );
          }
        },
      },

问题

假如开始时间选择2023-09-07 00:00:00,结束时间可以选择7号。
如果开始时间选择2023-09-07 00:00:01(7号但大于00:00:00的时间),结束时间不可以选择7号。

原因

控件会取每个日期的00:00:00作为判断条件。
所以2023-09-07 00:00:01(大于00:00:00)会作为2023-09-08 00:00:00处理。所以8号前的日期都被禁用。也就不能选择7号了。
而2023-09-07 00:00:00会作为2023-09-07 00:00:00处理.所以7号前的日期都被禁用（能选择7号）。

解决方法：

判断选择日期小于（开始日期-一天少一毫秒）(不能减一天，因为开始日期选择00：00：00时，结束日期就会多一天)
或者判断：判断选择日期小于等于（开始日期-一天）

pickerOptionsEnd: {
        disabledDate: (time) => {
          if (this.queryParams.startDate) {
            return (
              //小于开始日期-一天(少1毫秒，也可以用8.64e6表示，一天的毫秒数是8.64e7)的都禁止，只能选大于等于开始日期的
              time.getTime() < new Date(this.queryParams.startDate).getTime() - (24 * 3600 * 1000 - 1)
              //time.getTime() < new Date(this.queryParams.startDate).getTime() - 8.64e6
              //time.getTime() <= new Date(this.queryParams.startDate).getTime() - (24 * 3600 * 1000)
              //time.getTime() <= new Date(this.queryParams.startDate).getTime() - 8.64e7
            );
          }
        },
      },