element ui 怎么去修改el-date-picker的时间

最新推荐文章于 2025-05-26 10:25:27 发布

weixin_30437847

最新推荐文章于 2025-05-26 10:25:27 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

文章标签： ui

原文链接：http://www.cnblogs.com/antyhouse/p/10272355.html

本文介绍如何使用Element UI的日期选择器组件，并通过设置pickerOptions属性来实现多种日期范围的快捷选择，包括今天、最近一周、最近一个月、最近三个月及最近一年。同时，文章还展示了如何在Vue中通过fetchData方法获取数据并处理时间范围。

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

      <el-date-picker
          v-model="formSearch.timeRange"
          type="daterange"
          placeholder="选择日期"
          range-separator=" ~ "
          :picker-options="pickerOptions">
        </el-date-picker>

 pickerOptions: {
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            const end = new Date();
            end.setHours(23, 59, 59);
            const start = new Date(end);
            start.setTime(end.getTime() - 3600 * 1000 * 24 + 1000);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            end.setHours(23, 59, 59);
            start.setTime(end.getTime() - 3600 * 1000 * 24 * 7 + 1000);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            end.setHours(23, 59, 59);
            start.setTime(end.getTime() - 3600 * 1000 * 24 * 30 + 1000);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            end.setHours(23, 59, 59);
            start.setTime(end.getTime() - 3600 * 1000 * 24 * 90 + 1000);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一年',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            end.setHours(23, 59, 59);
            start.setTime(end.getTime() - 3600 * 1000 * 24 * 365 + 1000);
            picker.$emit('pick', [start, end]);
          }
        }]
      }

 fetchData() {
      this.listLoading = true
      setTimeout(() => {
        this.listLoading = false
      }, 10000)
      var params = {}
      if(this.entId){
        params = Object.assign(this.formSearch, {
          entId: this.entId
        })
      } else {
        params = Object.assign({}, this.formSearch)
        //重点在这里
        if (params.timeRange[0]) {
          params.from = this.handleTime(params.timeRange[0])
          params.to = this.handleTime(params.timeRange[1])
        }
      }
      fetch.getFiveList(params).then(res => {
        this.listLoading = false
        if (res.status == 200) {
          this.list = res.data.data.content
          this.totalCount = parseFloat(res.data.data.totalElements)
        } else if (res.status >= 500) {
          this.$message.error('服务器错误')
        } else {
          this.$message.warning(res.data.message)
        }
      }).catch(err => {
        this.listLoading = false
        this.$message.warning('加载失败！')
      })
    },
    handleTime(time, isStart) {
      let date = new Date(time)
      let year = date.getFullYear()
      let month = date.getMonth() + 1
      let day = date.getDate()
      return [year, month, day].map(num => this.handleNumber(num)).join('-')
    }

转载于:https://www.cnblogs.com/antyhouse/p/10272355.html