How to Handle Dates in UTC with JavaScript

Sure, navigating the complexities of time zones can be a daunting task for any software developer. When dealing with international clients or users, we often face the challenge of managing time in a way that is consistent for everyone, regardless of their location. That’s where the Coordinated Universal Time (UTC) comes into play.

Have you ever struggled with handling dates in UTC using JavaScript? You’re definitely not alone. It’s a common issue, but luckily, there are effective solutions that can simplify it for us. Let’s unravel the mystery together and make date and time handling in JavaScript a breeze.

In this post, we will be looking at the following 3 ways to handle dates in UTC with JavaScript:

• By using Date.UTC() method
• By using toISOString() method
• By using a library like Moment.js or Luxon

Let’s explore each…

#1 – By using Date.UTC() method

The Date.UTC() method in JavaScript returns the number of milliseconds since January 1, 1970, 00:00:00, universal time, for the specified date and time. We can better understand this concept through an example where we will create a date object with a specific UTC date and time.

var milliseconds = Date.UTC(2022, 3, 15, 8, 30, 0);
var dateObj = new Date(milliseconds);

How it works

The Date.UTC() method takes the date and time components in UTC format and returns the number of milliseconds from January 1, 1970, to the specified date and time. This millisecond value is then used to instantiate a new Date object.

• Step 1: We call the Date.UTC() method with the specific date and time components. In our example, we are specifying the year as 2022, the month as 3 (which corresponds to April, as months are 0-indexed in JavaScript), the day as 15, and the time as 8:30:00 (UTC).
• Step 2: The Date.UTC() method returns the number of milliseconds from January 1, 1970, to the specified date and time. This value is stored in the variable ‘milliseconds’.
• Step 3: We create a new Date object using the ‘milliseconds’ variable. This Date object represents the specific date and time we provided to the Date.UTC() method, but in the local time of the system where the script is running.

#2 – By using toISOString() method

The toISOString() method in JavaScript is used to convert a Date object into a string, using the ISO standard format (YYYY-MM-DDTHH:MM:SS.SSSZ) where ‘Z’ denotes UTC time. It’s an effective way to handle dates in a consistent, time-zone agnostic manner. For better understanding, let’s see an example:

var date = new Date();
var dateInISOString = date.toISOString();
console.log(dateInISOString);

How it works

The toISOString() method takes a JavaScript Date object and converts it into a string representation in the ISO 8601 extended format, which is always 24 or 27 characters long (YYYY-MM-DDTHH:mm:ss.sssZ). It’s very useful for storing and comparing dates, as it represents them in a standardized and timezone-independent way.

• First, a Date object is created using the Date() constructor, which initializes a new Date object representing the current date and time.
• Then, the toISOString() method is called on the Date object. This method returns a string representing the Date object in the ISO 8601 format, which follows the “YYYY-MM-DDTHH:MM:SS.SSSZ” format. Here, ‘T’ is the delimiter that separates the date and time, and ‘Z’ denotes that the time is in UTC.
• Finally, the resulting string, which represents the date in ISO format, is logged to the console. If you run this code, you’ll see a string logged to the console that represents the current date and time in the ISO 8601 format, in UTC.

#3 – By using a library like Moment.js or Luxon

This process will involve converting a local time to UTC by using either Moment.js or Luxon libraries in JavaScript, providing a better understanding through an example of each method.

Moment.js Example:

const moment = require('moment');

let localDate = moment();
let utcDate = localDate.clone().utc();

console.log('Local date:', localDate.format());
console.log('UTC date:', utcDate.format());

Luxon Example:

const { DateTime } = require('luxon');

let localDate = DateTime.local();
let utcDate = localDate.toUTC();

console.log('Local date:', localDate.toString());
console.log('UTC date:', utcDate.toString());

How it works

Both libraries, Moment.js and Luxon, provide simple and efficient methods to handle dates and times in JavaScript. They offer various methods to convert local time to UTC and vice versa.

Moment.js:

1. The ‘moment’ function is used to fetch the current local date and time.
2. ‘clone’ method is used to create a copy of the local date.
3. The ‘utc’ function converts the local date to UTC.
4. The ‘format’ function is used to format the date in a standard string format for display.

Luxon:

1. The ‘DateTime.local’ function gets the current local date and time.
2. The ‘toUTC’ method converts the local date to UTC.
3. The ‘toString’ method is used to format the date in a standard string format for display.

Related:

• How to Extract URL Parameters with JavaScript
• How to Compare Values with Less Than or Equal to in JavaScript
• How to Check if a String is Empty in JavaScript

In conclusion, handling dates in UTC with JavaScript might seem challenging initially, but it’s straightforward once you grasp the basics. Using in-built methods like Date.UTC(), .toISOString(), and .getTimezoneOffset() simplifies the process and enables managing dates efficiently.

To summarize, understanding and using UTC dates is crucial for handling time zones in JavaScript and ensuring data consistency. With a little practice, you can master this skill and improve your web development proficiency.

• Category: How to