jQuery datepicker + Rails 3.2.8 + AngularJS：显示和持久化日期问题

Question

I'm having an hard time making the triad rails+angularjs+jQuery datepicker work together.

The first issue is with showing the date as retrieved from the backend. When the UI requests data from the backend, at some point, it receives the following stuff in JSON notation.

{"id":1,"ragione_sociale":"FrigoCaserta srl","indirizzo":"Strada provinciale Gricignano d'Aversa","cap":"81030","citta":"Gricignano d'Aversa","provincia":"CE","partita_iva":"1234","codice_fiscale":null,"tipo_contratto":"Orario","costo":"0.0","inizio":"2012-05-01","fine":"2013-09-22","$$hashKey":"005"}

The relevant fields are "inizio" and "fine" (respectively start and end dates).

Rails timezone is set to Europe/Rome.

Datepicker's options are set to: {dateFormat: 'dd/mm/yy'}

Thus I expected the input field to show the "inizio" date as: 01/05/2012 but, instead, I get back: 24/03/2018.

Changing the dateFormat option to 'yy-mm-dd' shows the correct date but with unwanted separator and format (2012-05-01) ...

What happens behind the scenes, though, is that the displayed object gets somewhat manipulated and becomes like this:

{"id":1,"ragione_sociale":"FrigoCaserta srl","indirizzo":"Strada provinciale Gricignano d'Aversa","cap":"81030","citta":"Gricignano d'Aversa","provincia":"CE","partita_iva":"1234","codice_fiscale":null,"tipo_contratto":"Orario","costo":"0.0","inizio":"2012-04-30T22:00:00.000Z", ...

Note the "inizio" field is now transformed from "2012-05-01" to "2012-04-30T22:00:00.000Z"

Now, when I submit the form to the backend everything goes belly up, since rails receives the new value for "inizio" as formatted by the datepicker. The database field being just a Date makes the information about time disappear, and what's left is just the (wrong) date persisted into the model.

I'm aware that datepicker has localization options, but I can't find anything timezone related I could change to fix this unwanted behaviour.

I thought I could use attributes on the backend's model to parse the information coming from UI, but I don't like this approach.

What's the best practice to follow when dealing with all this?

I've gone through StackOverflow similar questions without luck.

Thanks in advance for your help.

Answer 1

Once this pull request makes its way into core, it should be easier as resource will support a decoder where this string to date translation can be done. https://github.com/angular/angular.js/pull/1514