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.
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.
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.
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.
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.
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).
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:
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With