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>