Create a Date with a set timezone without using a string representation
using .setUTCHours()
it would be possible to actually set dates in UTC-time, which would allow you to use UTC-times throughout the system.
You cannot set it using UTC in the constructor though, unless you specify a date-string.
Using new Date(Date.UTC(year, month, day, hour, minute, second))
you can create a Date-object from a specific UTC time.
How to ignore user's time zone and force Date() use specific time zone
A Date object's underlying value is actually in UTC. To prove this, notice that if you type new Date(0)
you'll see something like: Wed Dec 31 1969 16:00:00 GMT-0800 (PST)
. 0 is treated as 0 in GMT, but .toString()
method shows the local time.
Big note, UTC stands for Universal time code. The current time right now in 2 different places is the same UTC, but the output can be formatted differently.
What we need here is some formatting
var _date = new Date(1270544790922);
// outputs > "Tue Apr 06 2010 02:06:30 GMT-0700 (PDT)", for me
_date.toLocaleString('fi-FI', { timeZone: 'Europe/Helsinki' });
// outputs > "6.4.2010 klo 12.06.30"
_date.toLocaleString('en-US', { timeZone: 'Europe/Helsinki' });
// outputs > "4/6/2010, 12:06:30 PM"
This works but.... you can't really use any of the other date methods for your purposes since they describe the user's timezone. What you want is a date object that's related to the Helsinki timezone. Your options at this point are to use some 3rd party library (I recommend this), or hack-up the date object so you can use most of it's methods.
Option 1 - a 3rd party like moment-timezone
moment(1270544790922).tz('Europe/Helsinki').format('YYYY-MM-DD HH:mm:ss')
// outputs > 2010-04-06 12:06:30
moment(1270544790922).tz('Europe/Helsinki').hour()
// outputs > 12
This looks a lot more elegant than what we're about to do next.
Option 2 - Hack up the date object
var currentHelsinkiHoursOffset = 2; // sometimes it is 3
var date = new Date(1270544790922);
var helsenkiOffset = currentHelsinkiHoursOffset*60*60000;
var userOffset = _date.getTimezoneOffset()*60000; // [min*60000 = ms]
var helsenkiTime = new Date(date.getTime()+ helsenkiOffset + userOffset);
// Outputs > Tue Apr 06 2010 12:06:30 GMT-0700 (PDT)
It still thinks it's GMT-0700 (PDT), but if you don't stare too hard you may be able to mistake that for a date object that's useful for your purposes.
I conveniently skipped a part. You need to be able to define currentHelsinkiOffset
. If you can use date.getTimezoneOffset()
on the server side, or just use some if statements to describe when the time zone changes will occur, that should solve your problem.
Conclusion - I think especially for this purpose you should use a date library like moment-timezone.
Convert date to another timezone in JavaScript
Here is the one-liner:
function convertTZ(date, tzString) {
return new Date((typeof date === "string" ? new Date(date) : date).toLocaleString("en-US", {timeZone: tzString}));
}
// usage: Asia/Jakarta is GMT+7
convertTZ("2012/04/20 10:10:30 +0000", "Asia/Jakarta") // Tue Apr 20 2012 17:10:30 GMT+0700 (Western Indonesia Time)
// Resulting value is regular Date() object
const convertedDate = convertTZ("2012/04/20 10:10:30 +0000", "Asia/Jakarta")
convertedDate.getHours(); // 17
// Bonus: You can also put Date object to first arg
const date = new Date()
convertTZ(date, "Asia/Jakarta") // current date-time in jakarta.
How do I set up timezone with 'new Date()' function in javascript?
It isn't possible to set the timezone of the built-in Date
object. Its timezone is always the local timezone.
However, the Moment Timezone plugin for moment.js will allow you to change a moment to a specific timezone.
Example:
function showTheTime() {
var da_te = moment().tz('America/Santiago');
document.getElementById("result").textContent = da_te.format('d/M/YY h:mma');
console.log(da_te.valueOf());
}
showTheTime();
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.13/moment-timezone-with-data.min.js"></script>
<p id="result"></p>
Related Topics
How to Get the Value of Text Input Field Using JavaScript
How to Get Client'S Ip Address Using JavaScript
Cartesian Product of Multiple Arrays in JavaScript
When Should I Use Arrow Functions in Ecmascript 6
Is JavaScript Guaranteed to Be Single-Threaded
How to Work Around JavaScript'S Parseint Octal Behavior
Question Mark and Colon in JavaScript
How to Access Post Form Fields in Express
How Does JavaScript Handle Ajax Responses in the Background
How to Set Object Property (Of Object Property Of..) Given Its String Name in JavaScript
Why Does Calling React Setstate Method Not Mutate the State Immediately
How to Use Multiple Versions of Jquery on the Same Page
JavaScript: Do I Need to Put This.Var For Every Variable in an Object
Selecting Text in an Element (Akin to Highlighting With Your Mouse)
Elements Order in a "For (… in …)" Loop
What's the Prettiest Way to Compare One Value Against Multiple Values