In my react application, when i creating a new date object for date-picker using moment-timezone package(with different timezone), the time is automatically converting to the local system time + the chosen timezone time. Is there any way to create a new date object with set a timezone on client side? i am using moment-timezone for globalization and Meteor Js for back-end

In my react application, when i creating a new date object for date-picker using moment-timezone package(with different timezone), the time is automatically converting to the local system time + the chosen timezone time. Is there any way to create a new date object with set a timezone on client side? i am using moment-timezone for globalization and Meteor Js for back-end

• javascript
• reactjs
• meteor
• momentjs
• moment-timezone

• It should pick up your locale settings automatically. Your server may need to have an environment setting for its timezone. – Mikkel Commented Dec 29, 2020 at 9:16
• Thanks for the response @Mikkel , i couldn't understand pletely, i need to create a new Date object for my date-picker in react ponent,how can i add my server environment to this functionality? can you please explain more? – suneeth Commented Dec 29, 2020 at 12:31
• Just to clarify: is your date and moment related code on client or server side? And where do you use it? (On same side, or do you somehow send the date to the other side, where you see the issue?) – ghybs Commented Dec 30, 2020 at 2:49
• @ghybs i am storing users timezone into database and when a user logged in to the system the timezone fetch from db and convert all dates using moment-timezone package, i don't have any problem while showing all dates in different timezones, i have problem when i try to create a datepicker, i have to pass a new date object to the datepicker functionality, i need to create a datepicker with user timezone. – suneeth Commented Dec 30, 2020 at 4:20

1 Answer 1

If I understand correctly, your issue is that you want to provide a Date Picker UI that automatically generates a Date object from the selected date and user time zone setting (retrieved from your database), but what you get is a date in user's local time (hence may already have some timezone offset) + the user time zone offset setting.

You have mainly 3 possible solutions:

1. Have the Date Picker UI always provide a date in UTC (typically at midnight UTC), then add your user's timezone offset setting.
2. Have the Date Picker UI take your user's timezone setting as a configuration, so that when it automatically generates a Date, it uses that timezone offset configuration.
3. Have the Date Picker UI provide a Date in the browser local time, then shift it to UTC, then add your user's timezone offset setting.

Option 1 DatePicker in UTC: I have not seen any library that provides such option, but it does not sound too weird, so you may find one that does. Or you may fiddle with the ponent code... which is probably overkill pared to option 3.

Option 2 DatePicker with timezone configuration: from your ment, this sounds like what you expect. Unfortunately, I have not seen any library that offers such feature either. As this sounds even more specific than option 1, it is unlikely you can find such a library.

Option 3 local time shift to UTC then add user timezone: this is the standard practice to achieve the objective of generating a Date in a given timezone, starting from a Date in local time, due to all DatePicker UI working just with local time to simplify things. As to shift local time to UTC, you should have plenty questions and answers on SO already.

In case you have to provide an initial value to your Date Picker UI (typically a previous value from database), then make sure to perform the reverse operation, i.e. subtract your user's timezone offset setting to get a date in UTC, then shift to browser locale time. I have seen applications that neglect this part and have incorrect date when the local time has a negative offset to UTC.