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

时间 2019-11-06

标签使用 vue elementui 开发关于时间控件问题繁體版

原文原文链接

ElementUI的时间控件绑定的model能够Date对象。javascript

Date对象是UTC时间，比北京时间慢了8个小时。vue

ElementUI的时间控件会自动将UTC时间转成本地时间进行显示，可是model仍是UTC时间。java

这点在保存时，或者自定义验证函数时候，会看出来。npm

// 函数中的value是Date对象是UTC时间，比时区没有+8，也就是说比本地时间慢了8小时
var validate_UK_CreateDate = (rule, value, callback)

缘由是，在使用new Date()，建立的时间是UTC时间，UTC时间与GMT时间同样，都与英国伦敦的本地时间一致：bash

// 本地时间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个小时。函数

网上有不少方法能够处理，例如，写一段代码本身转换时间：this

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中也很方便。prototype

cnpm install moment

经过上面命令下载moment，而后在main.js中进行配置，具体以下：code

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

到此moment就安装完毕了，如今能够经过moment格式化来建立本地时区的Date对象，具体以下：orm

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