search

nathanreyes / v-calendar

An elegant calendar and datepicker plugin for Vue.
https://vcalendar.io
MIT License
4.38k stars 854 forks source link

Date format and internationalization #179

Open ScreamZ opened 6 years ago

ScreamZ commented 6 years ago

Hello, first I would like to thank you for this great library. I love it so much.

I think this is a pretty common issue, but I'm starting playing with date and locales :'(

Problem

If I'm posting today it's because I'm encountering an issue with apollo-client my GraphQL client library.

I'm using the DatePicker component with single mode, I'm currently in France and when I click a day it returns me the following value : Mon Aug 13 2018 00:00:00 GMT+0200 (Central European Summer Time)

apollo-client convert it to 2018-08-12T22:00:00.000Z before sending it to my backend. This is a standard 8601 conversion (ES2015 specification).

Result: When my backend receive and store the data. It is the day before. When I fetch back the data, there is no more localization because I'm getting the UTC ISO 8601 string.

So i'm highlighting the day before instead of the one I clicked.

Questions

Here come my two questions:

  1. What do you think should I store ? (I'm using a multi-country application). ISO 8601 ? Date with Locale ?
  2. How can I face this ?

Thanks for your help… Best regards.

Andréas

kl3sk commented 6 years ago

Maybe this is your apollo-client who needs to have the right locale.

ScreamZ commented 6 years ago

@kl3sk : Seems that is not possible to configure on apollo-client.

What I've done atm is:

  1. Using the Mon Aug 13 2018 00:00:00 GMT+0200 (Central European Summer Time) format.
  2. Therefore I let apollo-client auto-convert it to UTC ISO8601.
  3. My database is storing the UTC format.
  4. My webservice is serving UTC Date.
  5. And client side I'm using moment to localize the date (I though v-calendar would have done this auto, seems not)
const localizedDate = moment(session.date);

Looks good, but I think the documentation would require a bit of light on this ?

Best regards

PS: @nathanreyes I ping you on this, just in case you have some time to share with us about that ;)

premiermatt commented 5 years ago

Having the same issue parsing a date. Some information in the docs would be appreciated.

nathanreyes commented 5 years ago

@ScreamZ Thanks for the well-written explanation. Just to be clear when you pass the session.date into v-date-picker, this is a string in ISO 8601 format?

EDIT: Ok, please disregard that. I think I did not understand your issue.

Question: When the client fetches the date from your web service, how were you providing this date value back to v-date-picker? What code were you using, before using moment.