how can I make this specific format with moment

Question

I need output like this:

2017-08-11T16:11:00.000Z

I am not sure what this format is called. It seems that there are atleast two variations of this kind of format, the one above and the one that looks like:

2017-08-11 16:11:00+00:00

Is it the same thing? Why two variations?

Now to my problem, I am working with Vue2 and specifically I am using this component:

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

When it renders date to the user this component displays in this format: 2017-08-11 18:11:00

Behind the scene if I inspect the component value using Vue debugger it is stored like 2017-08-11T16:11:00.000Z

If you notice on that value it is actually 2 hours offset, I guess that this vue component internally stores value in UTC time based on what user picked and users timezone?

I got this reply from creator of this component when I asked him about what format value is stored inside component:

The value of DateTimePicker is a Date object. You can format it to whatever form you like before sending it to the server.

When I initialize this component I do it like this:

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

dateTimePicker variable is initialized like this:

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

dateTimePicker gets assigned date from server that is transformed to correct local time from UTC time stored on server.

Now everything is fine, user sees correct time upon loading something he created before, but now if user tries to save whatever he is working on, client will send whatever is in dateTimePicker and currently on fresh page dateTimePicker will be in yyyy-MM-dd HH:mm format

This is of course because user has not used picked any new time and datepicker component has not updated dateTimePicker variable with new correctly formatted value that my server expects.

Now server will receive wrong time which is X hours offset and save incorrect time to db. Now if user refreshes the page the time will be wrong. Each time user saves to server without touching datepicker component, date will get offset each time and so on.

Option 1: How can I send correct time to server if user has not messed with datepicker component and datepicker has not inserted correctly formated time?

Option 2: Could I perhaps initialize datepicker component with this format: 2017-08-11T16:11:00.000Z so that even if user does nothing with it and data is sent to server upon save, server will receive correct time.

If I want to do it with second option, how do I produce that format when I initialize dateTimePicker variable with date from server.

Thanks for suggestions.

Answer 1

Essentially what you want to do is allow user to enter and see the date in a familiar format but store the date in the database in ISO 8601 format.

You can achieve this in a couple of ways:

1. Front end

   Format the date before passing it to the date-time picker and format it again before sending it back to the server.

   Moment will recognize the ISO format automatically, so to convert it to a more human-friendly version use:

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

   Edit: Date-time picker will automatically cast the moment instance to a Date instance, therefore you can avoid the format step and just do:

    moment(date); 

   To convert it back to ISO you need to specify the current format:

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

   An example implementation: JSFiddle

2. Back end

   Depending on the server technology you're using you will have many different options, but the most common ones are:

   • Middleware

     Before you send the response and before you process the request, format the date accordingly.

   • ORM mutators

     After fetching the date from the database and before persisting it in the databse, format it using accessors and mutators(which are essentially glorified getters and setters respectively). Popular ORM implementations like Laravel Eloquent and Ruby on Rails' ActiveRecord support this.

Answer 2

这有效：

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