使用Vue與ElementUI開發時，關於時間控件的問題

ElementUI的時間控件綁定的model能夠Date對象。

Date對象是UTC時間，比北京時間慢了8個小時。

ElementUI的時間控件會自動將UTC時間轉成本地時間進行顯示，可是model仍是UTC時間。

這點在保存時，或者自定義驗證函數時候，會看出來。

// 函數中的value是Date對象是UTC時間，比時區沒有+8，也就是說比本地時間慢了8小時
var validate_UK_CreateDate = (rule, value, callback)

緣由是，在使用new Date()，建立的時間是UTC時間，UTC時間與GMT時間同樣，都與英國倫敦的本地時間一致：

// 本地時間2017-06-07 16:58:03.326

let date = new Date()
console.info(date) // 2017-06-07T08:58:03.326Z

北京時間是東區8小時，領先UTC時間8個小時，因此咱們本地時間比new Date()的時間快了8個小時。

網上有不少方法能夠處理，例如，寫一段代碼本身轉換時間：

let date = this.createDate;
        date = [
          [date.getFullYear(), date.getMonth() + 1, date.getDate()].join('-'),
          [date.getHours(), date.getMinutes(), date.getSeconds()].join(':')
        ].join(' ').replace(/(?=\b\d\b)/g, '0');
        this.createDate = date;

這裏我選擇使用moment.js，它在處理日期時間方面很是強大，安裝到Vue中也很方便。

cnpm install moment

經過上面命令下載moment，而後在main.js中進行配置，具體以下：

import Vue from 'vue';
import moment from 'moment';
Vue.prototype.$moment = moment;

到此moment就安裝完畢了，如今能夠經過moment格式化來建立本地時區的Date對象，具體以下：

// 2017-06-07 19:16:41
this.$moment(new Date()).format('YYYY-MM-DD HH:mm:ss')