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

一、导入el-date-picker组件

在挂载的div里导入组件:

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

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

v-model是绑定的数据

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

时间范围<el-date-pickerv-model="params.date"type="datetimerange"value-format="yyyy-MM-dd HH:mm:ss"range-separator="至"start-placeholder="开始日期"end-placeholder="结束日期"@change="dateFormat">

二、绑定获取的时间值

在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接。