elementUI中DatePicker如何将'2018-07-22'转成时间戳传给后台

一、需求

　　一直以来都没有总结的习惯，所以很多知识其实在项目中都用过但自己还是想不起来。所以现在要学着抽出时间去总结。下面说下这个知识点的来由。（我们项目用的是elementUI组件）

　　1、类似一个统计图的界面，需要根据时间的查询来显示相应的统计图表

　　　  

　　2、由于后台给我的接口需要传入startime和endtime两个参数，后台让我以时间戳的形式传给他（一开始时间是空的接口报500的错误，所以后台说让我默认endtime是当天的日期，starttime是当天的上个月日期、）

　　3、发现选择起始时间为2018-06-25，结束时间为2018-07-22查询数据。发现一个问题只能查询到2018-07-21之前的数据，不能查到2018-07-22那天的数据。产生这个的原因是elementUI1.4.13版本这个时间是从2018-07-22 00:00:00算的，而数据是在00：00：00之后的查询不到的

二、思考

　　1、首先我要给startime和endtime默认值

　　2、选择更改endtime怎么使得（如2018-07-22 00：00：00的时间变成2018-07-22 23：59：59）

　　3、转成时间戳的形式传给后台

三、解决问题

　　1、解决给startime和endtime默认值问题，解决方法如下：

　　　　（1）vue中template的代码如下：

<templete>
    <div class="content">
        <div class="handle-box MarginBt20">
            <!-- 时间 -->
            <div class="block">
                <span class="demonstration ">查询时间</span>
                <el-date-picker
                  v-model="startDate"
                  type="date"
                  @change="getStartTime"
                  format="yyyy-MM-dd"
                  placeholder="选择开始日期时间">
                </el-date-picker>
                <span>--</span>
                <el-date-picker
                  v-model="endDate"
                  type="date"
                  @change="getTime"
                  format="yyyy-MM-dd"
                  placeholder="选择结束日期时间">
                </el-date-picker>
                <el-button type="primary" icon="search" @click="search">查询</el-button>
            </div>          
        </div>
    </div>
</templete>

　　　备注：elementUI中对日期选择器有属性说明，如下图所示：

　　　　　　　　　　　　　　　　　　　　

　　　　（2）成功给默认值，vue中data的数据如下：

export default {
        data() {
            return {
                startDate: new Date(new Date().setMonth((new Date().getMonth()-1))),
                endDate: new Date(),
            }
          
         }
 }

　　2、解决选择更改endtime怎么使得（如2018-07-24 00：00：00的时间变成2018-07-24 23：59：59）

　　　　（1）写日期的change事件，我在项目写更改endtime的方法是getTime。主要是想记录自己当时的实现思路。

　　　　　　①、在vue中的script中写methods方法，getTime(date){},打印date是什么，一开始我以为那个date是Date类型，判断类型后才知道是字符串类型的。那么我需要将他转成Date类，解决方法代码如下：　

<script>
    export default {
        data(){
            return{
                startDate: new Date(new Date().setMonth((new Date().getMonth()-1))),
                endDate: new Date()
            }
        },
        methods:{
          getTime(date){               
                console.log(date);
                console.log(date.constructor)
                let self = this;
                let str = date;
                str = str.replace(/-/g, '/');
                let strDate  = new Date(str);
                console.log(strDate)
            }  
        }
    }
</script>

备注：我更改的endtime日期为2018-07-24，那么在浏览器中打印的结果如下：

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

　　　　　　②、需要将00:00:00的时间改为23:59:59，我用的是比较笨的方法。就是将Tue Jul 24 2018 00:00:00 GMT+0800 (中国标准时间)转成字符串的年月日，再加上'23:59:59'的字符串，输入框的日期依然显示2018-07-24

<script>
    export default {
        data(){
            return{
                startDate: new Date(new Date().setMonth((new Date().getMonth()-1))),
                endDate: new Date()
            }
        },
        methods:{
          getTime(date){               
                let self = this;
                let str = date;
                str = str.replace(/-/g, '/');
                let strDate  = new Date(str);
                let Y = strDate.getFullYear() + '-';
                let M = (strDate.getMonth()+1 < 10 ? '0'+(strDate.getMonth()+1) : strDate.getMonth()+1) + '-';
                let D = strDate.getDate();
                let dateAfter = Y+M+D+' '+'23:59:59';
                console.log(dateAfter)
                self.endDate = new Date(dateAfter);
                console.log(self.endDate)
            }
        }
    }
</script>

备注：浏览器打印的结果为

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

　　3、将Tue Jul 24 2018 23:59:59 GMT+0800 (中国标准时间)，转成时间戳传给后台

<script>
    export default {
        data(){
            return{
                startDate: new Date(new Date().setMonth((new Date().getMonth()-1))),
                endDate: new Date()
            }
        },
        methods:{
          getTime(date){               
                let self = this;
                let str = date;
                str = str.replace(/-/g, '/');
                let strDate  = new Date(str);
                let Y = strDate.getFullYear() + '-';
                let M = (strDate.getMonth()+1 < 10 ? '0'+(strDate.getMonth()+1) : strDate.getMonth()+1) + '-';
                let D = strDate.getDate();
                let dateAfter = Y+M+D+' '+'23:59:59';
                console.log(dateAfter)
                self.endDate = new Date(dateAfter);
                console.log(self.endDate)
            },
              //获取统计图信息
            getCartogramData(){
                let self = this; 
                if(self.startDate ==null || self.endDate ==null){
                    return
                }
                let startTime = self.startDate.getTime();
                let endDate = self.endDate.getTime();
                self.$axios.post('你的数据接口?'startTime='+startTime +'&endTime='+ endDate).then((res) => {
                  /*你的数据进行处理*/
                });
             }   
        }
    }
</script>