vue+elementUI 时间范围选择器

• Z时代
• 2024-01-10
• 分类：综合

1、引入组件

<div>
  <el-date-picker type="date" placeholder="选择开始日期" :picker-options="pickerOptionsStart" v-model="startTime" @change="startTimeChang"></el-date-picker>
  <el-date-picker type="date" placeholder="选择结束日期" :picker-options="pickerOptionsOver" v-model="endTime" @change="endTimeChang"></el-date-picker>
  <el-button style="margin-left: 10px;" plain size="mini" @click="theWeek">最近一周</el-button>
  <el-button style="margin-left: 10px;" type="primary" @click="searchTime" icon="el-icon-search">查询</el-button
</div>

2、js 定义

data() {
    return {
      startTime: ‘’,
      endTime: ‘’,
      pickerOptionsStart: {
        disabledDate (time) {
          return time.getTime() < 1488297600000 || time.getTime() >= Date.now();
        }
      },
      pickerOptionsOver: {
        disabledDate (time) {
          return time.getTime() < 1488297600000 || time.getTime() >= Date.now();
        }
      }
    };
  }

初始化定义：（最近一周）

 startTime: this.dateFilter(new Date() - 3600 * 1000 * 24 * 7),
 endTime: this.dateFilter(new Date()),

3、时间格式化方法，@change的方式取值

    dateFilter:function (input) {
          var d = new Date(input);
          var year = d.getFullYear();
          var month = d.getMonth() <9 ? \'0\' + (d.getMonth() + 1) : \'\' + (d.getMonth() + 1);
          var day = d.getDate() <10 ? \'0\' + d.getDate() : \'\' + d.getDate();
          // var hour = d.getHours();
          // var minutes = d.getMinutes();
          // var seconds = d.getSeconds();
          return  year+ \'-\' + month + \'-\' + day;
    },
    startTimeChang (val) {
      let startTime = this.dateFilter(val);
      this.startTime = startTime;
    },
    endTimeChang (val) {
      let endTime = this.dateFilter(val);
      this.endTime = endTime;
    },

4、查询

  async searchTime() {
      let param = {
        userId: this.$store.state.userInfo.userId,
        startTime: this.startTime,
        endTime: this.endTime
      };
      try {
        const reportData = await getTeamReportList(param);
        if (reportData.result) {
          console.log(reportData);
          this.reportList = reportData.data;
        } else {
          throw new Error(reportData.msg);
        }
      } catch (err) {
        this.$message.error(err.message);
        console.log(\'获取数据失败\', err);
      }
    }
  }

5、最近一周查询

    async theWeek() {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      this.startTime = this.dateFilter(start);
      this.endTime = this.dateFilter(end);
      this.searchTime();
    },

this.dateFilter(start)：时间格式化

-
-
-
-
-

附：时间段组件设置默认时间段 (最近一小时)
html:

<el-date-picker v-model="valueTime" type="datetimerange" align="right"  start-placeholder="开始日期" end-placeholder="结束日期" size="mini"> </el-date-picker>

  js:

data() {
    return {
        valueTime: [new Date().getTime(), new Date().getTime() + ((1 * 60 * 60 * 1000) - 1)],
    }
}

以上是 vue+elementUI 时间范围选择器 的全部内容， 来源链接： utcz.com/z/374694.html