el-date-picker怎樣獲取選擇的時間范圍值並判斷是否大於7天

場景

SpringBoot+Vue+Echarts實現選擇時間范圍內數據加載顯示柱狀圖：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/121555526

在上面需要用到選擇一段時間范圍並且該段時間范圍不能大於7天。

 

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。

實現

1、添加組件顯示

    <div class="block">
      <el-date-picker
        size="large"
        type="daterange"
        v-model="value1"
        range-separator="至"
        start-placeholder="開始日期"
        end-placeholder="結束日期"
        @change="dateSelectChange"
        :value-format="dateFormat"
      >
      </el-date-picker>

2、設置組件的value-format控制其時間格式，還需要v-model綁定數據

  data() {
    return {
      value1: "",
      dateFormat: "yyyy-MM-dd",
    };
  },

3、然后設置其change事件

      dateSelectChange(val) {
      if (val) {
        var startDate = new Date(val[0]).getTime();
        var endDate = new Date(val[1]).getTime();
        debugger;
        if (endDate - startDate > 6 * 24 * 60 * 60 * 1000) {
          this.$message({
            message: "所選時間范圍不能大於7天",
            type: "warning",
          });
        }else{
         
        }
      }
    },

4、完整示例代碼

<template>
  <div>
    <div>
      <BarChartDateRange ref="BarChartDateRange"></BarChartDateRange>
    </div>
    <div class="block">
      <el-date-picker
        size="large"
        type="daterange"
        v-model="value1"
        range-separator="至"
        start-placeholder="開始日期"
        end-placeholder="結束日期"
        @change="dateSelectChange"
        :value-format="dateFormat"
      >
      </el-date-picker>
    </div>
  </div>
</template>
<script>
import BarChartDateRange from "@/components/Echarts/BarChartDateRange";

export default {
  name: "Blog",
  components: {
    BarChartDateRange,
  },
  data() {
    return {
      value1: "",
      dateFormat: "yyyy-MM-dd",
    };
  },
  created() {
  },
  methods: {
    /** 查詢博客列表 */
      dateSelectChange(val) {
      if (val) {
        var startDate = new Date(val[0]).getTime();
        var endDate = new Date(val[1]).getTime();
        debugger;
        if (endDate - startDate > 6 * 24 * 60 * 60 * 1000) {
          this.$message({
            message: "所選時間范圍不能大於7天",
            type: "warning",
          });
        }else{
           this.$refs.BarChartDateRange.getSelectedRangeList(val);
        }
      }
    },
  },
};
</script>