Time zone issues

[adambedford]

What is the best way to handle time zones with Flatpickr?

Dates are showing up as 1 day behind, due to a time zone issue. My server is in UTC and I'm in Pacific time, selecting December 25th, for example, becomes 2016-12-25T08:00:00.000Z, which is then displayed by the browser as Sat, 24th Dec 2016.

[chmln]

What is the best way to handle time zones with Flatpickr?

1. Let user pick dates in local time. Use the "Z" ISO date format which is the de facto standard for storing dates in databases
2. Apply transformations to the dates before passing them to flatpickr using some external library like https://github.com/smallwins/spacetime or moment.js

I'm still exploring the best way to go about it and whether there's anything flatpickr can do to make dealing with dates less painful

[adambedford]

@chmln Thanks for your message. I've created a custom transform named utc that converts dates into a moment object when deserializing json -- do you have any suggestion how to get flatpickr to play nice with a moment object? Currently, it interprets the date incorrectly and shows "Fri, 1st Dec 0"

[emilv]

What timezone to use is context-dependant. I suggest you decide what timezone to use for date input and display. Convert the input time to UTC before storage, and convert it back before display.

For example, we have a tournament system with events in different timezones. The organizer picks a timezone for their event. All date inputs are then made in that timezone because that is what the organizer expects. We convert to UTC on the server side. Then we convert back to their timezone before display.

[chmln]

Thanks you for your insight @emilv I think this deserves a page on the documentation.

[Schaemelhout]

What if we want the user to actually select a Date in UTC?

I am currently in GMT+0100, so if I select 22/01/2018 from flatpickr, it returns Mon Jan 22 2018 00:00:00 GMT+0100 which serializes to 2018-01-21T23:00:00.000Z.

I would like to be able to select (UTC) 22/01/2018 from flatpickr, so have it return the following value: Mon Jan 22 2018 01:00:00 GMT+0100 which serializes to 2018-02-22T00:00:00.000Z.

[teawithfruit]

I got the same problem.

To create a valid UTC string I take the selectedDates which flatpickr provide in the onChange method and add the time which is provided by the browser in getTimezoneOffset() .

What do you think about this workaround?

[jdehaan]

That workaround doesn't work for dates that are ambiguous in some timezones... Like for the 2A and 2B hours in CET.

[ginkgomzd]

What is the best way to handle time zones with Flatpickr?

1. Let user pick dates in local time.
   Use the `"Z"` ISO date format which is the de facto standard for storing dates in databases

2. Apply transformations to the dates before passing them to flatpickr using some external library like https://github.com/smallwins/spacetime or `moment.js`

An example of the workaround that is working for me.

            datePickerConfig: {
                dateFormat: 'Y-M-D',
                altInput: true,
                altFormat: 'Y-M-D',
                locale: null,
                formatDate: (date, format, locale) => {
                    // locale can also be used
                    var formatDate = moment.tz(date, 'Etc/UTC')
                    return formatDate.format(format);
                }
              },

https://momentjs.com/timezone/docs/#/using-timezones/

My users are scheduling appointments for third-parties anywhere in the world and specify the timezone of the appointment. So, all I really want is a date string. So, I am storing and interpreting the datetime as UTC.