Append timezone to time which is a date Object - javascript

I am working on customizing primeng component for my requirement I came across a problem where I had to select a time and also select the time zone it should not affect the time selected but has to update the timezone as shown in the picture
I want to update only the timezone which is GMT to UTC as per selection
is there any way to update timezone without changing the date I tried finding a solution but failed please help on the problem
NOTE: I have customized the TIMEZONE selection

you can use toISOString() of basic JS date object (check for date docs) and then change it as you want.
But I recommend you to use external library (if possible with immutable instances of datetime) even if you do not prefer to. Especially when your application will be strongly dependent on resolving multiple timezones.

What about setUTCHours()?
let today = new Date(Date.now());
console.log(today.toISOString());
today.setUTCHours(10);
console.log(today.toISOString());
Also using new Date(Date.UTC(year, month, day, hour, minute, second)) you can create a new date object from a specific UTC time.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/UTC
This article can help you as well.

Related

Moment.js - how to get user time zone?

I want to set current time zone with moment.js for user that runs my app. My problem is that many of momentjs question posted here have method called tz but I can't see it now in 2020.
Format date in a specific timezone
With that method you can set this:
moment().tz('America/Phoeinx')
But I don't want to set this manually. I found utc method but it returns me timezone +0000.
How to set current time zone with momentjs in 2020?
Ok I found an answer, all that we need is just get current utcOffset from momentjs library:
const currentUtcOffset = moment().utcOffset()
and pass it to utc method
moment(date).utc(currentUtcOffset).toISOString()
Now everything works perfect.

How can I setLocaleHours() on a date object?

When I execute
myDate = new Date('2000-02-02 12:30:00')
I get a date object like this 2000-02-02T11:30:00.000Z because there is a difference of one hour between my timezone (Europe/Vienna) and UTC.
I can now change the hour by doing
myDate.setHours(10)
and the result will be a date object like this 2000-02-02T09:30:00.000Z because of the one hour difference.
I can also set the UTC hours by
myDate.setUTCHours(10)
to get a dateobject like this 2000-02-02T10:30:00.000Z
I'm looking for something similar to
myDate.setLocaleHours(10, "America/New_York")
(which doesn't exist)
What is the best way to set the hours to a specific value in a timezone which is not my current one and also not UTC?
How can I setLocaleHours() on a date object?
What is the best way to set the hours to a specific value in a timezone which is not my current one and also not UTC?
You can't. At least, not on the Date object. It has no ability to set time based on an arbitrary time zone.
There is work in progress to rectify this, by adding a new set of standard objects to ECMAScript. See the TC39 Temporal proposal for more details. The temporal ZonedInstant will have functionality to work with named time zones.
However, for now, you will need a library that understands time zones. Moment-timezone is one option, though, these days the Moment team recommends Luxon for modern app development. Another great option is js-Joda.

Determining the day of the week for specified date in an arbitrary timezone with momentJS

Say I had an ISO date string with embedded timezone information, like "2016-08-22T13:30:00-07:00" (Here, the -07:00 specifies PST). I'm looking for an elegant way to determine what day of the week it will be in that timezone on that date and time. I've tried moment.parseZone(datestring).weekday() to no avail. How can I make moment think in terms of the timezone specified in the string, instead of wherever the server happens to be?
You can try moment(datestring).utcOffset(datestring).weekday(), check the docs for more explanation. Also there is a part of the documntation on weekday which describes it as locale aware I am not sure if it maintains the time zone of the date while converting or defaults to your local/server location, I usually uses moment.day(), if it suits your use case, you can use it instead of weekday().

JavaScript: How to set a date so that it looks the same all over the world?

One of our programmers decided to use a DATE field in the MySQL db in order to achieve this.
Sending and saving a JS date object did work well until the daylight saving changes intervened (with nasty effects :) ).
Of course, saving the date in a DATETIME field solves it, but everybody sees the time/dates in their own timezone.
We need everybody (all over the timezones) to see the same date!
I clarify this, to get the proper answers:
I want to keep using the DATE field storage type in MySQL (vs DATETIME - ok, maybe too much of an optimization, but it's already there and I want a long term solution for when I receive such structure/code from other developers)
Sending local time (local JS in browser) 23-05-2016, will reach the server as 22-05-2016 0X:X0:00Z (UTC) and be store as such. Because it's a DATE field, the stored value will become 22-05-2016 only. And you lost a day! :)
Our solution from bellow not only fixes the DATE field trimming, but also adds the fact that people now can see the same correct date (23-05-2016) no matter of the timezone they are in!
I like the outcome and would love to see some better solutions to achieve the same and improve the system.
Actually, we have noticed the problem only when the daylight saving time changed, so my solution (as answer bellow) is a good solution for that as well. And it only consumes resources client-side.
I have posted my own solution to this question as an answer bellow.
It would be really cool to see a much better solution from you!
With Javascript
Save your dates in ISO format (including timezone information) and use moment.js to convert the datetime to another timezone.
If moment.js is not already a dependency, and you want to avoid extra libraries, keep reading.
With MySQL
Instead of solving this problem when you write the data (losing timezone information in the process), solve it when you read the database.
In your SELECT query, normalize all DATETIME values to your preferred timezone using the convert_tz built-in function.
MomentJs is your best bet. Find the timezone you want and pass the ISO string to it and you should be good to go.
http://momentjs.com/timezone/docs/#/using-timezones/
A DATE is just a year, month, and day. It doesn't have a time, or a time zone. Think about your birthday or your wedding date, or today's date.
The JS Date object is not this at all. It's a timestamp. It's the number of milliseconds elapsed since Midnight January 1st 1970 UTC.
You should leave your date as a date-only wherever possible. Use the ISO-8601 date-only format, which is YYYY-MM-DD. If you have to assign it a time and time zone, then be very careful when you do.
If you just assign midnight local time, then you're risking losing a day (as you showed), and you're not considering that there are local days in some time zones where midnight does not exist! (Such as the spring-forward day in Brazil). Noon is a safer bet than Midnight, but still you should use this sparingly. The better approach is to keep dates as dates, not as date-times.
Also, I'd answer with code if I could, but you didn't provide any code in your question showing what was broken. Please read How do I ask a good question? and How to create a Minimal, Complete, and Verifiable example. Thanks.
There are more solutions to this, but the fastest and easiest that I could come up with is described bellow:
Let's intervene as early as possible in the information stream.
Just change the data before transmitting it through AJAX.
The function we used is this:
function addTimezoneDiffAnd12HoursToDate(date) {
var timezoneOffset = date.getTimezoneOffset();
date.setHours(12-Math.floor(timezoneOffset/60));
date.setMinutes(-timezoneOffset % 60);
return date;
}
What it does is that it converts a Date to be always at noon (12:00) UTC!
You can use it like this:
$scope.contract.contractDate = addTimezoneDiffAnd12HoursToDate($scope.contract.contractDate);
and send it as such to be stored in the DATE field.
Let me know if you have a simpler solution. I'd like to see it.

Set default TimeZone of the browser window in javascript

We are displaying schedules on our webpage which is build on GWT. Client system using different timezone from server and because of that, all the schedules were displaying wrong. Is there a way to set default time zone when we load the page? Like the way we do it in java:
TimeZone.setDefault(TimeZone.getTimeZone("Asia/Kolkata"));
Thanks!!!
No, you can't set the timezone of Date objects in javascript. Usually you use only UTC and epoch-based timestamps.
Only when creating a Date from a string or from year, month etc. the local timezone will be used, you can only get the timezone offset.
Converting a timezone can only be done by re-setting the Hours of the Date object (example described here), creating a date which looks-like having an offset timezone but is just utc.
In case you are using moment.js for your dates, you can set the default timezone for all newly created moments with:
moment.tz.setDefault(String)
https://momentjs.com/timezone/docs/#/using-timezones/default-timezone/

Categories