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
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:
Have the Date Picker UI always provide a date in UTC (typically at midnight UTC), then add your user's timezone offset setting.
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.
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 component code... which is probably overkill compared to option 3.
Option 2 DatePicker with timezone configuration: from your comment, 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.
Related
So I have this use case where a user should be able to enter data into a react site having an order_fulfilment_datetime_str which is supposed to be a RFC 3339 datetime string according to the specs of the api this would be posted to.
So essentially a user(in any timezone) selects a (future) date and time (using a plugin such as react-datepicker) assuming that the date time is going to be in PST/PDT.
But the plugin and javascript date object returns the selected date time in the browser's timezone. So I have two things to solve:
How do I make sure that selected date/time is in PST/PDT
How to deal with DST?
Currently what I am trying to do is to simply get individual date, hours, minutes using getHours(), getMinutes(), getDate() to form the string. But again then how will I find out if this selected datetime has offset of -8 or -7(i.e. PST/PDT)?
I checked date-fns and date-fns-tz library but was not sure how to solve this issue using these.
You can use luxon library for setting a global timezone that you want, and then whenever a user selects a date-time using a date-time picker you can simply convert that into the timezone you want.
import { Settings } from "luxon"
Settings.defaultZone = <time-zone>
The above code snippet will set a default zone for the app
Now when a user selects a date-time convert it to the timezone you want using the below code
DateTime.fromISO(dateTimeValue, { setZone: true})
Date stored in server at GMT+0 without Day Light Saving.
Client should receive it in it's own timezone format. So we can get time zone offset and summarize it with received date:
const currentTime = new Date();
this.timezoneOffset = currentTime.getTimezoneOffset();
Then we can check if client in DLS region somehow, for example using momentjs:
const isDaylightSavingTime = moment().isDST();
And there I can't figure out 3 things:
1) does getTimezoneOffset() already contain Day Light Saving information
2) and if not, what the better way to check is user in DST then moment (because I readed thet moment js have not some countries and cities in it's own base)
3) does Moment().add(Moment().utcOffset(), 'm') return date with Day Light Saving?
And there I can't figure out 3 things:
1) does getTimezoneOffset() already contain Day Light Saving information
Moment is a wrapper for ECMAScript Date objects. The timezone offset for a built–in Date instance is based on host system settings. Depending on the implementation, it may or may not reflect historic changes to timezones for the related date (i.e. the Date that the method is called on). It will at least reflect the current settings.
2) and if not, what the better way to check is user in DST then moment (because I readed thet moment js have not some countries and cities in it's own base)
You need to define "better". In addition to other libraries (e.g. Luxon), there are web APIs like timezonedb and Date.prototype.toLocaleString with the timeZone option that uses IANA location names like "Asia/Shanghai". You can also download and use the IANA timezone database if you wish.
3) does Moment().add(Moment().utcOffset(), 'm') return date with Day Light Saving?
You can't modify the timezone offset, there is only a getter, so any "local" date will have the timezone offset applied, whether that be the standard or daylight saving offset for the particular date and location. All the above does is shift the time by the offset, it doesn't change the timezone (unless it's shifted across a daylight saving boundary).
Date objects are UTC at heart, so the general approach is to use UTC for everything and only consider the timezone offset for presentation. That doesn't cover all scenarios, but it does the majority. The remaining cases require specific approaches based on use cases.
If you describe what you are trying to do, you might get more relevant answers.
I am developing an angular js application. I use dates. I need to provide a option to user to select the timezone? User can select local timezone, UTC or any other timezone from dropdown.
I want to change every occurrence of the Date to the selected timezone date depending on the selection of the timezone.
I have found that Moment.JS makes this so incredibly simple. You don't have to worry about offsets or anything. It takes care of it all for you. Check out the docs here
I am looking for a JavaScript based time picker (jquery, extjs, bootstrap etc) control which converts the local time into UTC time. It must take into consideration user location and provide accurate time.
There are lot of controls available which allows you to pick time but I want to know what is the most accurate way to convert the time into UTC equivalent. There are lots of post available which talks about converting time into UTC but some of the post are old and some of them have one or the other catch.
What I am trying to do:
Assume the local time on user machine is 10 AM. I am asking user to pick a time > current time (or a future time). Assume user picks 11:30 AM. I want convert the 11:30 AM (local to his timezone) into UTC equivalent.
I am using the moment.js library. I have dates in this format: "2014-06-19T18:00:00+02:00" (string). I want to display the date formatted with the user's timezone.
moment.js docs specifies to use moment("2014-06-19T18:00:00+02:00").utc().format()
My questions are:
How can I set the timezone once and not have to put .utc() every time?
How can I test the timezone functionality? Should I change my computer's clock?
Calling .utc() would actually translate the value you put in to UTC. If you want the user's local time zone, then you should just omit that and call .format().
That you passed a +02:00 offset with the original value doesn't matter. By default, moment will adjust the value to the user's time zone.
On the other hand, if you want to keep the offset you provided, regardless of the user's time zone, then you can use the parseZone function.