随笔 - 91,  文章 - 0,  评论 - 3,  阅读 - 47581

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   飞飞乐园  阅读(240)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾(3.3-3.9)
· winform 绘制太阳,地球,月球 运作规律
历史上的今天:
2021-09-07 go学习-gorm

< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5
点击右上角即可分享
微信分享提示