1需求

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

<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
            );
          }
        },
      },

2问题

点击x,清空datatimepicker控件。发现日期选择不了。
解决方法:
用watch监听选择器的值,清空选择器值变为null,选择器识别不了,需要改为""

watch: {
    queryParams.startDate: function () {
      if (this.queryParams.startDate === null) {
        this.queryParams.startDate = "";
      }
    },
  },
posted on 2023-09-07 09:52  飞飞乐园  阅读(110)  评论(0编辑  收藏  举报