How do I change the time zone in JavaScript? - javascript

I've been working on a time app for JS and I was wondering, how could I change the time zone. See, I live in the eastern time zone of North America, and i don't like converting it to the International Timezone. So here is my Code.
<button type="button"
onclick="document.getElementById('time').innerHTML = Date()">
Click me to display Date and Time.</button>
<p id="time"></p>
When I click the button, I get,
Wed Dec 30 2015 13:40:25 GMT+0000 (UTC)
But I want it to be:
Wed Dec 30 2015 8:40:25 (EST)

Date.prototype.toString is supposed to give you a string in your local time (as configured on your client).
When you click Run code snippet this should show an alert dialog with your local time string (toString is implicitly called, like in your example);
alert(new Date());
If it does give you the expected result then either you client timezone is not configured correctly or the browser you are using is bugged.

Related

Date in Javascript and Java(Spring boot)

I've read many posts on this topic, still i have some questions
first i get an date input (28/09/2019) from html input tag, let's call it aDate
<input name="ExpireDate" ng-model="personalDetail.ExpireDate" type="date">
in Javascript
console.log(aDate) gives Sat Sep 28 2019 00:00:00 GMT+1000 (Australian Eastern Standard Time)
console.log(aDate.toISOString()) gives 2019-09-27T14:00:00.000Z
i know they are both correct as the first one is UTC+10 time and the second one is UTC+0 time
and then i pass aDate to a spring boot application, it shows 2019-09-27T14:00:00.000Z if i parse it to LocalDate(which is supported by postgresql) it will lose T14:00:00.000Z part
then if i try to convert LocalDate 2019-09-27 in Java to Date in Javascript the date is now one day off.
my current solution is use LocalDateTime instead of LocalDate, it worked but i really dont want to store that time info in database
is there a way to get rid of the time info in Javascript Date? or any other solutions to tackle this
another strange things is why i specified type="date" in html input tag, it still give me datetime data?
UPDATE:
LocalDateTime does not work
converting 2019-09-27T14:00:00.000Z to LocalDateTime yields 2019-09-27T14:00
but in Javascript new Date('2019-09-27T14:00') treats it as local time and yields
"Fri Sep 27 2019 14:00:00 GMT+1000 (Australian Eastern Standard Time)"
"2019-09-27T04:00:00.000Z"

Start of Day from one timezone to GMT

I am using moment-timezone library to build a UI that needs to be relative to a variety of timezones.
I am taking an input of a timezone, i.e "America/Chicago" and need to get the start of day in GMT.
For instance, if today is March 27th at 9am Chicago time (2pm GMT), I need to get the date in epoch seconds for March 27th, 00:00 AM.
I'm using the moment.tz("America/Chicago").startOf('day') but I keep getting Tue Mar 27 2018 01:00:00 GMT-0400 (EDT) . Any idea how to do this?
Thanks
// This part you are already doing correctly.
// You get back a Moment object representing the start of the current day in Chicago:
var m = moment.tz("America/Chicago").startOf('day');
I need to get the date in epoch seconds
// Ok, so simply now get the associated Unix Time
var timestamp = m.unix();
Also note that the correct terminology is "Unix Time", not "epoch seconds".
See my blog post: "Please don't call it Epoch Time".
... but I keep getting Tue Mar 27 2018 01:00:00 GMT-0400 (EDT)
You are probably either looking at _d or a Date object, or rather the string representation of one. Don't. See this Moment.js documentation for details.
Per your comment:
I need to take the current time in a specific timezone. I then need to convert that time to the corresponding day in GMT. Finally I need to get the midnight epoch timestamp of that GMT day.
That's a little different then you originally asked, but it would be like this:
var timestamp = moment.utc().startOf('day').unix();
Note that there's no purpose in involving another time zone for this operation. Logically, when asking for "Now in time zone A converted to time zone B", it's the same as asking for "Now in time zone B". In other words, you would get the same value even when the time zone was present:
var timestamp = moment.tz('America/Chicago').utc().startOf('day').unix();
So you're better off just leaving the time zone out.

Why does Javascript show me the wrong date?

Consider the following date object which is created in JavaScript.
var date = new Date("2017-09-07T16:46:06.000Z");
This date object should be equivalent to Sep 7 2017 4:46:06 PM
However, in the browser console, when I type the following:
console.log(date);
The following is returned:
Fri Sep 08 2017 02:46:06 GMT+1000 (E. Australia Standard Time)
The time is wrong. (It actually is today's date, but the time is completely wrong).
Key points of confusion:
My computer timezone is set to GMT+1000 (Australia/Brisbane)
When I created the date object, I did not specify the timezone, therefore it should conform to my systems timezone
When I log the date object to the console, it is still using GMT+1000 (Australia/Brisbane) but the date is different
When you created the date, you did specify a timezone. That Z at the end means Zulu or Greenwich Mean Time. Your computer is 10 hours off from GMT, so it adjusts to your local timezone for display.
If you want the date to be in your local time zone, remove the Z
var date = new Date("2017-09-07T16:46:06.000Z");
So it looks like the Z at the end of your date string is meant to represent UTC or Zulu time
var date = new Date("2017-09-07T16:46:06.000");
should be the correct solution

Angular JS - Date changes when submitting to $http - Timezone issue

I am having a strange problem where a Date changes when it is passed to API through $http.put, I suspect a timezone issue:
Datepicker triggers ng-change event - console.log:
Tue Jun 10 2014 00:00:00 GMT+0100 (GMT Summer Time)
Passed to API using Angular $http.put...
When it hits Fiddler:
StartDate=2014-06-09T23:00:00.000Z
As you can see the date changes from 10th June to 9th June.
How can I stop this change of date? Is it the timezone causing the change? Both the API and client side are running on Localhost.
Further to this:
When the field is clicked a second time and the datepicker launched / date selected, this second time the problem does not appear:
Console.log:
Wed Aug 06 2014 22:00:00 GMT+0100 (GMT Summer Time)
Fiddler data received:
StartDate=2014-08-06T21:00:00.000Z
I think it is a TZ issue, b/c the difference between your GMT+0100 and your StartDate=2014-06-09T23:00:00.000Z is 5 hours.
.
The issue:
Your local time is currently BST (British Summer Time) equivalent to GMT +1
This is going to be the default time when you make your API call.
However, the API was written by Google in California, and they are rather egocentric. Therefore, they're automatically converting the time since you're not providing any date formatting "instructions".
In other words, Chrome does the conversion for you nicely when you print to the console.log(), but when you make your $http.put, Angular, without explicit formatting for you, makes the call using it's default TZ (which is PST)
.
Resolution
You need to force the date formatting to your locale.
Angular template
{{ date_expression | date : 'yyyy-MM-dd HH:mm:ss'}}
In JavaScript
$filter('date')(date, 'yyyy-MM-dd HH:mm:ss')
using localization
<html>
<head>
<title>My Angular page</title>
<script src="angular-locale_en-uk.js"></script>
...
</head>
<body>
...
</body>
</html>

jQuery.datepicker.formatDate and timezone offset

To handle dates, i'm using a jQuery UI public method in my application: jQuery.datepicker.formatDate
See params & source here : https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.datepicker.js
However the wrong date is displayed sometimes, according to the computer timezone.
Demo here : http://jsfiddle.net/7ACdB/
With a UTC+1 (paris) timezone in windows, i got :
03/30/20
03/30/20
With a UTC-6 (us&canada) timezone in windows, i got :
03/29/20 <- meh!
03/30/20
You need to restart your browser (well for google chrome at least) when you change the OS timezone.
My problem is the "03/29/20" date as you can imagine.
Can somebody explains to me if this is normal or a jquery ui issue ?
I'm beginning to think that it is normal to see a "Mon Mar 30 2020 00:00:00 GMT+0200 (Romance Daylight Time)" as 03/29/20 in a US timezone but i'm not so sure. :-/
What you're getting is correct. Your example sets the time at midnight for Paris. Midnight in Paris is 6PM the day before in the US for the Eastern Time Zone which I am in.
Your first time: GMT+0200 is Paris
Your second time: GMT-0500 is Chicago (note it is currently Daylight Savings Time)
So, when you change the time zone to US (using one of our 6 time zones), the output is the time in the US when is that time in Paris.
Here is an updated fiddle with a the time set to 6 AM Paris: http://jsfiddle.net/jensbits/7ACdB/1/

Categories

Resources