我该如何立即制作这种特定格式

Question

我需要这样的输出：

2017-08-11T16：11：00.000Z

我不确定这种格式叫什么。 似乎至少有两种这种格式的变体，一种是上面的，另一种是这样的：

2017-08-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

如果您注意到该值实际上偏移了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小时的偏移量，并将错误的时间保存到db。 现在，如果用户刷新页面，时间将是错误的。 每次用户保存到服务器而不接触日期选择器组件时，日期都会被偏移一次，依此类推。

选项1：如果用户没有弄乱datepicker组件并且datepicker没有插入正确格式的时间，如何将正确的时间发送到服务器？

选项2：也许我可以用以下格式初始化datepicker组件：2017-08-11T16：11：00.000Z，以便即使用户不执行任何操作并且保存后将数据发送到服务器，服务器也将收到正确的时间。

如果要使用第二个选项，在使用服务器中的日期初始化dateTimePicker变量时如何生成该格式。

感谢您的建议。

Answer 1

本质上，您要执行的操作是允许用户以熟悉的格式输入和查看日期，然后以ISO 8601格式将日期存储在数据库中。

您可以通过以下两种方法来实现：

1. 前端

   在将日期传递给日期时间选择器之前对其进行格式化，然后在将其发送回服务器之前再次对其进行格式化。

   Moment将自动识别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变异子

     从数据库中获取日期之后，然后将其保存在数据库中，然后使用访问器和更改器（分别是修饰的getter和setter）格式化它。 诸如Laravel Eloquent和Ruby on Rails的ActiveRecord之类的流行ORM实现都支持此功能。

Answer 2

这有效：

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