This post will guide you through the essentials of handling dates in JavaScript, using the built-in Date object. We'll explore creating dates, formatting them, performing date calculations, comparing dates and handling time zone conversions.

You can create a date in JavaScript using the Date constructor. You can create a date object using different formats:

js
1// Current date and time
2const now = new Date();
3console.log(now);
4
5// Specific date and time (YYYY, MM, DD, HH, MM, SS, MS)
6const specificDate = new Date(2024, 6, 15, 10, 30, 0, 0);
7console.log(specificDate);
8
9// From timestamp (epoch timestamp, milliseconds since January 1, 1970)
10const timestampDate = new Date(1718477533698);
11console.log(timestampDate);
12
13// From date string (ISO format)
14const stringDate = new Date("2024-06-15T10:30:00Z");
15console.log(stringDate);

JavaScript provides methods to get individual components of a date, such as seconds, minutes, hours, days, etc.

These methods allow you to extract specific parts of a date object:

js
1const date = new Date("2024-06-15T10:20:30Z");
2
3// Getting Year
4const year = date.getFullYear();
5console.log(year); // 2024
6
7// Getting Month (0-11, where 0 is January and 11 is December)
8const month = date.getMonth();
9console.log(month); // 5 (June)
10
11// Getting Date of the Month (1-31)
12const dayOfMonth = date.getDate();
13console.log(dayOfMonth); // 15
14
15// Getting Day of the Week (0-6, where 0 is Sunday and 6 is Saturday)
16const dayOfWeek = date.getDay();
17console.log(dayOfWeek); // 6 (Saturday)
18
19// Getting Hours (0-23)
20const hours = date.getHours();
21console.log(hours); // 10
22
23// Getting Minutes (0-59)
24const minutes = date.getMinutes();
25console.log(minutes); // 20
26
27// Getting Seconds (0-59)
28const seconds = date.getSeconds();
29console.log(seconds); // 30
30
31// Getting Milliseconds (0-999)
32const milliseconds = date.getMilliseconds();
33console.log(milliseconds); // 0
34
35// Getting UTC Hours
36const utcHours = date.getUTCHours();
37console.log(utcHours); // 10

JavaScript provides methods to format dates in a human-readable way.

Here are some commonly used methods:

• toDateString - converts the date portion of a Date object to a string
• toTimeString - converts the time portion of a Date object to a string
• toLocaleDateString - converts the date to a string using locale conventions
• toLocaleTimeString - converts the time to a string using locale conventions
• toISOString - converts the date to an ISO 8601 string

Now let's explore these methods in action:

js
1const date = new Date();
2
3// e.g., "Sat Jun 15 2024"
4console.log(date.toDateString());
5
6// e.g., "10:33:30 GMT+0300 (Eastern European Summer Time)"
7console.log(date.toTimeString());
8
9// e.g., "6/15/2024"
10console.log(date.toLocaleDateString("en-US"));
11
12// e.g., "10:33:30 AM"
13console.log(date.toLocaleTimeString("en-US"));
14
15// e.g., "2024-06-15T07:33:30.000Z"
16console.log(date.toISOString());

JavaScript allows you to add or subtract time units from dates.

You can add seconds, minutes, hours, days, months, years. For example:

js
1const today = new Date();
2
3// Adding minutes
4const newDate = new Date(today);
5newDate.setMinutes(newDate.getMinutes() + 10);
6console.log(newDate);
7
8// Adding days
9const tomorrow = new Date(today);
10tomorrow.setDate(tomorrow.getDate() + 1);
11console.log(tomorrow);
12
13// Adding months
14const nextMonth = new Date(today);
15nextMonth.setMonth(nextMonth.getMonth() + 1);
16console.log(nextMonth);

Here is how you can subtract date units:

js
1const today = new Date();
2
3// Subtracting minutes
4const newDate = new Date(today);
5newDate.setMinutes(newDate.getMinutes() - 10);
6console.log(newDate);
7
8// Subtracting days
9const yesterday = new Date(today);
10yesterday.setDate(today.getDate() - 1);
11console.log(yesterday);
12
13// Subtracting years
14const lastYear = new Date(today);
15lastYear.setFullYear(today.getFullYear() - 1);
16console.log(lastYear);

To add or subtract dates, you need to deal with the time values in milliseconds, since JavaScript Date objects don't directly support arithmetic operations.

To add a specific time interval to a date, convert the interval to milliseconds and add it to the date's time value:

js
1const date = new Date("2024-06-15T10:00:00Z");
2const daysToAdd = 5;
3
4// Adding days
5const resultDate = new Date(date.getTime() + (daysToAdd * 24 * 60 * 60 * 1000));
6console.log(resultDate);

To subtract a time interval from a date, convert the interval to milliseconds and subtract it from the date's time value:

js
1const date = new Date("2024-06-15T10:00:00Z");
2const daysToSubtract = 3;
3
4// Subtracting days
5const resultDate = new Date(date.getTime() - (daysToSubtract * 24 * 60 * 60 * 1000));
6console.log(resultDate);

JavaScript allows you to compare dates using comparison operators. Since dates are essentially numbers (milliseconds since January 1, 1970), you can directly compare them:

js
1const date1 = new Date("2024-06-15T10:00:00Z");
2const date2 = new Date("2024-06-16T10:00:00Z");
3
4console.log(date1 > date2); // false
5console.log(date1 < date2); // true
6
7// false (compares exact time)
8console.log(date1.getTime() === date2.getTime());

To find the difference between two dates, subtract one date from the other. This gives you the difference in milliseconds, which can then be converted to other units:

js
1const date1 = new Date("2024-06-15T10:00:00Z");
2const date2 = new Date("2024-06-20T10:00:00Z");
3
4const diffInMilliseconds = date2 - date1;
5const diffInDays = diffInMilliseconds / (24 * 60 * 60 * 1000);
6
7console.log(diffInDays); // 5

Date class provides several useful static methods for handling dates and times. Let's explore them:

Date.now() - returns the number of milliseconds elapsed since January 1, 1970, 00:00:00 UTC (the Unix Epoch). This method is useful for measuring time intervals and for generating timestamps.

js
1const milliseconds = Date.now();
2console.log(milliseconds); // e.g., 1718477533698

Date.parse() - parses a date string and returns the number of milliseconds, equivalent to the date and time described by the string. This method is helpful for converting date strings into a format that can be used to create Date objects or perform date calculations.

js
1const timestamp = Date.parse("2024-06-15T10:00:00Z");
2console.log(timestamp);

Date.UTC() - accepts date components (year, month, day, hours, minutes, seconds, milliseconds) and returns the number of milliseconds in UTC for the given date and time. This method is useful for creating Date objects in UTC, especially when dealing with time zone differences.

js
1// Note: months are 0-based (0 = January, 11 = December)
2const timestamp = Date.UTC(2024, 5, 15, 10, 0, 0);
3console.log(timestamp);

JavaScript's Date object operates in the local time zone of the user's system. To handle different time zones, you can use UTC methods:

js
1const date = new Date();
2
3// Getting UTC date and time
4console.log(date.getUTCDate());
5console.log(date.getUTCHours());
6
7// Setting UTC date and time
8const utcDate = new Date();
9utcDate.setUTCFullYear(2024);
10utcDate.setUTCMonth(6);
11utcDate.setUTCDate(15);
12console.log(utcDate.toISOString());

Dealing with UTC time is particularly useful when fetching data from the server. Often server stores dates in UTC and frontend is responsible to transform it to the user's local time.

Let's explore such an example with a real API that returns datetime info:

js
1async function fetchUtcTimeAsync() {
2  try {
3    const response = await fetch("https://worldtimeapi.org/api/timezone/Europe/London");
4    const data = await response.json();
5
6    return data.utc_datetime;
7  } catch (error) {
8    console.error("Error fetching UTC time for London:", error);
9  }
10}
11
12const utcDateTimeString = await fetchUtcTimeAsync();
13const utcDate = new Date(utcDateTimeString);

After fetching the utc datetime string, we can use it to create a Date object.

To convert it to the local time, we can use the getTime function and create a new Date object:

js
1const localDate = new Date(utcDate.getTime());
2
3console.log("UTC Date and Time:", utcDate.toISOString());
4console.log("Local Date and Time:", localDate.toString());

Today we explored how to:

• create dates
• extract part of dates
• format dates
• perform date calculations and comparison
• how to use Date static methods
• and how to handle time zones

Now you're fully equipped with information on how to work with Dates in JavaScript, so you can efficiently manage dates and times in your applications.

Hope you find this newsletter useful. See you next time.