2017-08-10 47 views
0

这个特定的格式,我需要这样的输出:我怎么能做出与时刻

2017-08-11T16:11:00.000Z

我不知道这是什么格式被调用。它似乎有这样的格式,上面的一个,并且看起来像一个ATLEAST两个变化:

2017年8月11日16:11:00 + 00:00

难道是相同的事情?为什么两个变化?

现在我的问题,我与Vue2工作,特别是我使用这个组件:

http://element.eleme.io/#/en-US/component/datetime-picker

当它呈现日期用户此组件显示格式为: 2017-08- 11 18时11分00秒

幕后,如果我检查使用Vue的调试器是存储像2017-08-11T16组件值:11:00.000Z

如果该值注意到它是ACTUA lly 2个小时的偏移量,我猜这个vue组件根据用户选择的时区和用户时区在内部存储UTC时间的值?

我得到了这个组件的开发者这个答复,当我问他有什么格式的值存储内部组件:

的DateTimePicker的值是一个Date对象。您可以在将它发送到服务器之前将其格式化为任何形式。

当我初始化这个组件我做这样的:

<el-date-picker 
    v-model="dateTimePicker" 
    format="yyyy-MM-dd HH:mm" 
    type="datetime" 
    size='small' 
    placeholder="Pick a date"> 
</el-date-picker> 

dateTimePicker的变量初始化是这样的:

dateTimePicker: moment.utc(this.initPublishedAtDate, 'YYYY-MM-DD HH:mm').local().format('YYYY-MM-DD HH:mm') 

dateTimePicker的被从被转化为正确的本地服务器分配的日期从UTC时间存储在服务器上的时间。

现在一切正常,用户看到正确的时间加载之前创建的东西,但现在如果用户试图保存他正在工作的任何东西,客户端将发送任何在dateTimePicker和当前在新鲜的页面dateTimePicker将在yyyy -MM-dd HH:mm格式

这当然是因为用户没有使用过拾取的任何新时间,并且datepicker组件没有更新dateTimePicker变量,而我的服务器期望使用新的格式正确的新值。

现在服务器会收到错误的时间,这是X小时的偏移量,并将错误的时间保存到数据库。现在,如果用户刷新页面,时间将是错误的。每次用户保存到服务器而不触及datepicker组件时,日期将每次都抵消等等。

选项1: 我如何发送正确的时间服务器,如果用户没有使用日期选择器组件和日期选择器搞砸还没有插入正确格式化时间?

选项2: 我可以用这种格式初始化datepicker组件:2017-08-11T16:11:00.000Z,这样即使用户对它没有做任何事情,并且数据在保存时发送到服务器,服务器也会收到正确的时间。

如果我想用第二个选项来做,当我从服务器初始化dateTimePicker变量和日期时,如何生成该格式。

感谢您的建议。

+0

什么类型的对象是'this.initPublishedAtDate'?一个字符串? –

+0

关于Z格式,它是ISO格式:https://stackoverflow.com/a/25713676/392102 –

+0

'2017-08-11T16:11:00.000Z'是[ISO 8601格式](https:// en。 wikipedia.org/wiki/ISO_8601)。第二种格式(不带'T')不符合ISO标准。但'+00:00'和'Z'的意思是一样的(“零点偏移”) – 2017-08-10 18:08:49

回答

1

基本上你想要做的是让用户进入并看到一个熟悉的格式的日期,但存放在ISO 8601的格式在数据库中的日期。它传递的日期,时间选择器之前

  1. 前端

    格式的日期和发送回之前再次格式化:

    可以在一对夫妇的方式做到这一点服务器。

    瞬间会自动识别ISO格式,因此将其转换为一个更人性化的版本使用:

    moment(date).format('YYYY-MM-DD HH:mm'); 
    

    编辑:日期,时间选择器会自动施放moment实例为Date实例因此可以避开format一步,只是做:

    moment(date); 
    

    要将其转换回ISO需要指定当前格式:

    moment(date, 'YYYY-MM-DD HH:mm').toISOString(); 
    

    的范例:JSFiddle

  2. 后端

    取决于你使用,你将有许多不同的选择的服务器技术,但最常见的是:

    • 中间件

      在您发送回复之前和处理请求之前,请相应地格式化日期。

    • ORM存取器

      读取从数据库的日期和之后坚持它在DATABSE,格式之前它使用accessor和mutator(其基本上是美化了getter和setter分别地)。流行的ORM实现(如Laravel EloquentRuby on Rails' ActiveRecord)支持此操作。

+0

我注意到你的小提琴最初用一个字符串填充'date',但是datepicker将它改为一个Date对象。 –

+0

如果您将它保留为日期,它会简化一些事情(更少的时间传递):https://jsfiddle.net/263sxLtf/1/ –

+0

您是对的,我更新了答案。 –

0

这个工程:

dateTimePicker: moment.utc(this.initPublishedAtDate, 'YYYY-MM-DD HH:mm').format('YYYY-MM-DDTHH:mm:ssZ')