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

一、导入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接。