Vue+Element UI-el-date-picker时间日期选择器组件（实现向后端传值）

Vue+Element UI-el-date-picker时间日期选择器组件（实现向后端传值） Have_MonkeyG 已于2022-09-22 11:36:34修改 3156 收藏 10 文章标签： 前端 vue.js ui elementui 于2022-07-04 19:17:53首次发布 一、导入el-date-picker组件 在挂载的div里导入组件:

其中value-format后是自己定义的日期格式，根据自己的需求去修改

@change="dateFormat"是获取时间的方法

v-model是绑定的数据

type是获取的时间的数据类型，datetimerange是字符串类型我们就不需要toString了

<%--时间选择控件--%> <div class="block" style="float:left;margin-right: 15px"> <span class="demonstration">时间范围</span> <el-date-picker v-model="params.date" type="datetimerange" <%--format="HH:mm:ss"--%> value-format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="dateFormat"> </el-date-picker> </div> 二、绑定获取的时间值

在data数据区内定义相关的时间数据

//时间数据的存放 params: { startTime: '', endTime: '', date: '' },

需要注意的是startTime和endTime才是你要获取的真正时间数据

三、使用 @change="dateFormat"方法来获取响应的时间区间

在mthods中定义dateFornat方法

        注：在上方中我们已经指定数据类型typ=datetimerange，返回的是一个数组。如果使用的是type="daterange"需要进行toString的转换。这两种不管是哪一种我们在后台接数据的时候都不能用Date类型来接要用String类型来接。接下来我们就需要发送请求在后端接数据了

//方法区 methods:{ //获取时间区间方法 dateFormat(picker){ this.params.startTime=picker[0] this.params.endTime=picker[1] //类型是type="daterange" //this.params.startTime=picker[0].toString // this.params.endTime=picker[1].toString }, } 四、向后端发送请求 axios.post("你的后端接口?startTimee="this.params.startTime+"&endTime="+this.params.endTime).then(function(result){ }) 例子 axios.post("/statistics/findBranchTurnover?startTime="+this.params.startTime+"&endTime="+this.params.endTime).then(function (result){ }) 五、后台的接收

一定要用String接。