element-ui中日期区间组件

最新推荐文章于 2025-05-30 09:06:22 发布

H5女王

最新推荐文章于 2025-05-30 09:06:22 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

文章标签： ui 前端 javascript

本文链接：https://blog.youkuaiyun.com/H5_QueenStyle12/article/details/130699145

文章描述了如何在ElementUI中使用日期组件，设置最大可选时间为3个月，并添加快捷选择功能，如今天、最近一周、最近一月和最近三个月。当选择时间超限或点击确定按钮时，会有相应的校验和反馈机制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

描述

点击【确定】按钮进行验证，点击【清空】按钮，清空输入框中的数据,
时间范围不能超过3个月，并添加快捷选择今天、最近一周、最近一月、最近3个月，以下为代码。

tips：1、点击确定按钮之前，点击非组件table，可以收起日期选择框。
2、点击确定按钮之后，只要不满足条件，点击任何区域都不会收起日期选择组件，除非关闭浏览器。
3、如果要完善第一条，点击确定按钮之前，只要不满足条件，点击任何区域都不会收起日期选择组件，除非关闭浏览器这一操作方法，日期组件上添加change方法（没有尝试过，用change方法和用blur方法的区别是，blur方法满足第二条，用change方法的话，点击确定按钮会校验一次，再次点击确定按钮会校验通过，对于我的需求有bug，所以用了blur方法，有兴趣的朋友可以尝试一下两个方法，本人比较懒不想尝试）

时间组件代码

 <el-date-picker
              ref="datePickRef"
              v-model="searchForm.queryTime"
              clearable
              type="datetimerange"
              value-format="yyyy-MM-dd HH:mm"
              format="yyyy-MM-dd HH:mm"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions"
              :validate-event="true"
              @blur="handleTimeRange"
            />

pickerOptions放在data中

            pickerOptions: {
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            const startTime = _this.$moment().format('YYYY-MM-DD 00:00');
            const endTime = _this.$moment().format('YYYY-MM-DD HH:mm');
            _this.searchForm.queryTime = [startTime, endTime];
            _this.$refs.datePickRef.handleClose();
          }
        }, {
          text: '最近一周',
          onClick(picker) {
            const end = _this.$moment()._d;
            const start = new Date();
            const time1 = _this.$moment(end).subtract(7, 'days').unix() * 1000;
            start.setTime(time1);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = _this.$moment()._d;
            const start = new Date();
            const time1 = _this.$moment(start).subtract(1, 'months').unix() * 1000;
            start.setTime(time1);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = _this.$moment()._d;
            const start = new Date();
            const time1 = _this.$moment(start).subtract(3, 'months').unix() * 1000;
            start.setTime(time1);
            picker.$emit('pick', [start, end]);
          }
        }]
    }

handleTimeRange方法放在methods中

// 判断开始时间和结束时间的区间长度
    handleTimeRange() {
      if (!this.searchForm.queryTime) {
        this.searchForm.queryTime = [];
      } else {
        const startTime = this.$moment(this.searchForm.queryTime[0]);
        const endTime = this.$moment(this.searchForm.queryTime[1]);
        const rangeMonth = endTime.diff(startTime, 'month', true);
        if (rangeMonth > 3) {
          this.$message.error('时间范围，时长必须小于等于3个月！');
          this.$refs.datePickRef.focus();
        } else {
          this.$refs.datePickRef.handleClose();
        }
      }
    },