場景

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

SpringBoot+Vue+Echarts實現選擇時間范圍內數據加載顯示柱狀圖_BADAO_LIUMANG_QIZHI的博客-CSDN博客

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

注：

博客：
BADAO_LIUMANG_QIZHI的博客_霸道流氓氣質_CSDN博客-C#,SpringBoot,架構之路領域博主
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。

實現

1、添加組件顯示

??? <div class="block"><el-date-pickersize="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-pickersize="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>

總結

以上是生活随笔為你收集整理的el-date-picker怎样获取选择的时间范围值并判断是否大于7天的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。