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
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})
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.
I made small JS app using Sencha Touch/ExtJS. It display some date values taken from database. But those date get changed depending on client's time zone.
How can i stop automatic time and date change and display values as i enter ?
use moment.js, it handles all kind of timezone issues.
I have a user select a timezone. I then need to get the timezone that they have selected and have it passed through a search not the timezone the computer is using.
I know that:
.getTimezoneOffset //returns the computers offset
I need to get the timezone that the user has chosen as his or her timezone and pass it through the search.
My code looks like this
var expireFrom = $('input[name=expireFrom]').datepicker('getDate');
var expireDate = new Date();
if(expireFrom!=null)
expireFrom=expireDate.getTimezoneOffset();
How do I call the users chosen timezone and not the computers?
The Javascript Date object is not capable of working with other time zones directly.
Time Zone != Offset
Date pickers don't typically have time zone selection. If you have one that does, you need to tell what you're using.
If you really want to let your users pick a time zone, you'll need a control like this one.
To do anything useful with time zones, you'll need a TZDB implementation. You are best doing this in your back-end server-side code. If you must do it in JavaScript, you can try one of the libraries mentioned in this answer.
From my understanding, Arshaw FullCalendar displays events according to the timezone of the local computer's operating system. I assume this is done by the javascript Date() object, which also is based on the local computer's operating system. I have an application that has group calendars and a group timezone, I want to be able to force every local Arshaw Calendar to display according to that group's time-zone, no matter what timezone that computer is. How do you do this?
Note: I've looked through the documentation fairly thoroughly, and found no such option. I'm hoping that javascript has something equivalent to php's date_default_timezone_set(), which seems to me the way this could be solved.
*Edit 1/31/2013 12:23pm CST:
I am sending everything to the calendar as unix timestamps, so I assume the option ignoreTimezone would not apply here, as described in this stackoverflow thread:
jQuery FullCalendar timezone synchronization
You should probably try to set the option "ignoreTimezone" to "false" and give to Arshaw FullCalendar date in ISO8601.
You can get more information about that here: http://arshaw.com/fullcalendar/docs/event_data/ignoreTimezone/
To convert unix timestamps to ISO8601, you can use this in javascript:
var d = new Date(1360412434000).toISOString();
This is ECMAScript 5.
See here for compatibility and fallback code: https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Date/toISOString