<el-date-picker
     end-placeholder="結(jié)束日期"
     range-separator="至"
     start-placeholder="開始日期"
     type="datetimerange"
     v-model="value1"
     :default-time="['00:00:00', '23:59:59']"
     >
</el-date-picker>

上面代碼效果圖

element ui上的日期時間選擇器里面的時間為中國標準時間，選擇時間，打印出來為下圖

但一般后臺需要的是年月日時分秒，需要我們進行處理

data(){
    return{
      beginTime: null,
      endTime: null,
    }
}

methods:{
  filterTime(time) {
        var date = new Date(time);
        var y = date.getFullYear();
        var m = date.getMonth() + 1;
        m = m < 10 ? "0" + m : m;
        var d = date.getDate();
        d = d < 10 ? "0" + d : d;
        var h = date.getHours();
        h = h < 10 ? "0" + h : h;
        var minute = date.getMinutes();
        minute = minute < 10 ? "0" + minute : minute;
        var s = date.getSeconds();
        s = s < 10 ? "0" + s : s;
        return y + "-" + m + "-" + d + " " + h + ":" + minute + ":" + s;
      },
}
//點擊查詢按鈕
searchTableData(){
if(this.value1 != null){//如果不選擇時間，或者選擇時間再將時間清除，直接點擊查詢，會報錯，所以要判斷一下，這個為時間不為空走這個。
    this.beginTime = this.filterTime(this.value1[0]),
    this.endTime = this.filterTime(this.value1[1])
  }else {//判斷選擇時間再將時間清除
     this.beginTime = null
     this.endTime = null
        }
this.getTableData();//調(diào)用表格接口

}

補充——————————————————————————————————

element ui上面有個屬性format顯示輸入框里面的格式。

<el-date-picker
     end-placeholder="結(jié)束日期"
     range-separator="至"
     start-placeholder="開始日期"
     type="datetimerange"
     v-model="value1"
     :default-time="['00:00:00', '23:59:59']"
     value-format="yyyy-MM-dd HH:mm:ss"
     >
</el-date-picker>

重點：value-format="yyyy-MM-dd HH:mm:ss"，寫上這句代碼就不用處理年月日時分秒了，返回的就是我們需要的格式。文章來源地址http://www.zghlxwxcb.cn/news/detail-512456.html

到了這里，關(guān)于vue element ui里的日期時間選擇器 中國標準時間轉(zhuǎn)化為年月日時分秒的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！