场景

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天相关推荐

jQuery操作复选框checkbox技巧总结 ---- 设置选中、取消选中、获取被选中的值、判断是否选中等
jQuery操作复选框checkbox技巧总结 --- 设置选中.取消选中.获取被选中的值.判断是否选中等一.checked属性定义先了解下input标签的checked属性: 1.HTML &l ...
js获取html文本框值，判断，跳转
//html: <input type="text" id="user"/> <button onClick="beat()&quo ...
jQuery获取select onChange的值
本文翻译自:jQuery get value of select onChange I was under the impression that I could get the value of a ...
Date Picker控件：
Date Picker控件: 中文:日期/时间选取器UIDatePicker有一个实例方法setDate:animated,以编程的方式选择日期.UIDatePicker有四种模式(model):Ti ...
IOS学习六:Date Picker， Picker View选取器控件初步
Date Picker控件和Picker View控件其实也是算比较常用到视图. 以下根据红柚子上得几个例子: 分别从(日期选取器)Date Picker -->单部件选取器-->多部 ...
iOS开发UI篇—Date Picker和UITool Bar控件简单介绍
iOS开发UI篇-Date Picker和UITool Bar控件简单介绍一.Date Picker控件 1.简单介绍: Date Picker显示时间的控件有默认宽高,不用设置数据源和代理如何 ...
强大的独立日期选择器(date picker)插件 - Kalendae
日期:2012-4-16 来源:GBin1.com 在线演示本地下载今天分享一个独立的日期选择插件Kalendae,Kalendae是一个强大健壮的独立日期选择器.如果你不想使用重量的jQu ...
Iphone开发（七）date picker 和 picker view，较复杂的控件
holydancer原创,如需转载,请在显要位置注明: 转自holydancer的CSDN专栏,原文地址:http://blog.csdn.net/holydancer/article/details ...
微信小程序之picker选择器获取值得两种方法
想要实现的效果: 在选择器选择合适的选项后,页面显示所选择的内容第一种方法: //wxml页面 <picker bindchange="PickerChange" valu ...

el-date-picker怎样获取选择的时间范围值并判断是否大于7天

场景

实现

el-date-picker怎样获取选择的时间范围值并判断是否大于7天相关推荐

最新文章

热门文章