Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I specify the time zone when creating a JavaScript Date?

I have a countdown clock that is set to countdown to 8am on January 1, 2014.

I am using the following code to set the date:

var futureDate = new Date(2014, 0, 1, 8, 0, 0, 0);

This works but I would like to take it a step further and set it to a specific timezone. In my case UTC -7.

I have read this answer which says to use:

new Date(Date.UTC(year, month, day, hour, minute, second))

but what I am confused about is how I set the timezone to be UTC -7 and what I read online only leaves me more confused.

Can someone explain how Date.UTC works and how do I set a timezone so my countdown clock is counting down based on the specified timezone?

Note: Any answer must be client side only code.

like image 271
L84 Avatar asked Dec 30 '13 06:12

L84


People also ask

Does JavaScript date have timezone?

JavaScript's internal representation uses the “universal” UTC time but by the time the date/time is displayed, it has probably been localized per the timezone settings on the user's computer. And, indeed, that's the way JavaScript is set up to work.

How does JavaScript determine timezone?

The JavaScript getTimezoneOffset() method is used to find the timezone offset. It returns the timezone difference in minutes, between the UTC and the current local time. If the returned value is positive, local timezone is behind the UTC and if it is negative, the local timezone if ahead of UTC.

What timezone does new date () use?

The date object itself (as shown by your link) is the number of milliseconds since 1 January 1970 UTC - so therefore the Date itself doesn't have a timezone - it's just a number. It's only when you display it with toString that you see YOUR timezone.

How to initialize a date with a time zone in JavaScript?

Use the toLocaleString () method to initialize a date with time zone, e.g. date.toLocaleString ('en-US', { timeZone: 'America/Los_Angeles'}). The method can be passed the locale and the time zone as parameters and returns a string that represents the date according to the provided values. The Date object in JavaScript does not store a time zone.

How does date work in JavaScript?

The Date object in JavaScript manages time data using absolute numbers, such as Unix time, internally. Constructors and methods like parse (),getHour (),setHour (). However, it’s important to note that it is influenced by the client’s local time zone (the time zone of the OS running the browser, to be exact).

How to use datetime and timezone in HTML5?

HTML5 provides input type datetime-local allows user to enter both a date and a time and the user’s local time zone is used. For simplicity, Let’s enhance this to allow user to select any timezone. We are going to use Moment-Timezone library. Here is the HTML code for user input of datetime and timezone:

How does the date object use the computer's time zone?

When various functions of the Date object are used, the computer's local time zone is applied to the internal representation. If the function produces a string, then the computer's locale information may be taken into consideration to determine how to produce that string. The details vary per function, and some are implementation-specific.


1 Answers

Can someone explain how Date.UTC works

Date.UTC creates a timevalue for the provided year, month, date, etc. without any offset. So if the client machine is set for, say, UTC +05:00 then:

var d = new Date(Date.UTC(2013, 11, 30, 12, 0, 0));

will create a date equivalent to noon on 30 December 2013 at Greenwich. Alerting the date will print a local time (assuming +5:00) equivalent to 2013-12-30T17:00:00+05:00.

and how do I set a timezone so my countdown clock is counting down based on the specified timezone?

You can't set the timezone, however you can use UTC values to create a date object, adjust the hours and minutes for the offset, then use the UTC methods to get the date and time components for the countdown.

e.g.

function z(n){return (n < 10? '0' : '') + n;}

var d = new Date(Date.UTC(2012, 11, 30, 12, 0, 0));

d.setUTCHours(d.getUTCHours() - 7);

alert(d.getUTCFullYear() + '-' + z(d.getUTCMonth() + 1) + '-' + 
      z(d.getUTCDate()) + 'T' + z(d.getUTCHours()) + ':' +
      z(d.getUTCMinutes()) + ':' + z(d.getUTCSeconds()) + '-07:00'
);

// 2012-12-30T05:00:00-07:00

If non–UTC methods are used, the local offset will affect the result.

like image 89
RobG Avatar answered Oct 03 '22 03:10

RobG