vue+elementUI 時間范圍選擇器

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