使用Vue与ElementUI开发时，关于时间控件的问题

2019独角兽企业重金招聘Python工程师标准>>>

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')

 

转载于:https://my.oschina.net/u/2450666/blog/916625