elementUI中DatePicker如何將'2018-07-22'轉成時間戳傳給後臺

1、需求

　　一直以來都沒有總結的習慣，因此不少知識其實在項目中都用過但本身仍是想不起來。因此如今要學着抽出時間去總結。下面說下這個知識點的來由。（咱們項目用的是elementUI組件）

　　一、相似一個統計圖的界面，須要根據時間的查詢來顯示相應的統計圖表

　　　  

　　二、因爲後臺給個人接口須要傳入startime和endtime兩個參數，後臺讓我以時間戳的形式傳給他（一開始時間是空的接口報500的錯誤，因此後臺說讓我默認endtime是當天的日期，starttime是當天的上個月日期、）

　　三、發現選擇起始時間爲2018-06-25，結束時間爲2018-07-22查詢數據。發現一個問題只能查詢到2018-07-21以前的數據，不能查到2018-07-22那天的數據。產生這個的緣由是elementUI1.4.13版本這個時間是從2018-07-22 00:00:00算的，而數據是在00：00：00以後的查詢不到的

2、思考

　　一、首先我要給startime和endtime默認值

　　二、選擇更改endtime怎麼使得（如2018-07-22 00：00：00的時間變成2018-07-22 23：59：59）

　　三、轉成時間戳的形式傳給後臺

3、解決問題

　　一、解決給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(),
            }
          
         }
 }

　　二、解決選擇更改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>

備註：瀏覽器打印的結果爲

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

　　三、將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>