Date Class

Introduction

Welcome to this comprehensive lesson on the JavaScript Date class. This lesson is designed to guide you through the essentials of working with dates and times in JavaScript. Whether you’re a beginner or looking to refresh your knowledge, this guide will provide you with practical insights and code examples.

Understanding Epoch Time in JavaScript

Epoch time, also known as Unix time or POSIX time, is a system for tracking time in computing. It represents the number of milliseconds (in JavaScript) that have elapsed since a specific point in time, known as the “epoch”. It looks similar to this:

javascript

946684800000

Key Features:

Epoch Date: The epoch date is January 1, 1970, at 00:00:00 UTC. Time is calculated based on the number of milliseconds that have elapsed since this date.
Universal Measurement: It offers a universal way to measure time, regardless of time zones.
Milliseconds in JavaScript: JavaScript uses milliseconds as the unit for epoch time, whereas many systems use seconds.

Working with Epoch Time in JavaScript

Getting Current Epoch Time

To get the current epoch time in milliseconds:

javascript

	const currentEpochTime = Date.now();
	console.log(currentEpochTime); // Outputs the current epoch time in milliseconds e.g. 946684800000

Converting Date to Epoch Time

To convert a Date object to epoch time:

javascript

	const date = new Date();
	const epochTime = date.getTime();
	console.log(epochTime); // Outputs the epoch time equivalent of 'date'

Creating Date from Epoch Time

To create a Date object from an epoch timestamp:

javascript

	const epochTimestamp = 1700000000000;
	const date = new Date(epochTimestamp);
	console.log(date); // Converts and outputs the date equivalent of the epoch timestamp

Practical Uses of Epoch Time

Timestamps for Events: Epoch time is commonly used for logging events, as it provides a standardized format.
Time Calculations: It’s useful for performing time calculations, such as finding the difference between two dates.
Data Storage: Storing dates as epoch time in databases can simplify sorting and time zone conversions.

Creating Date Objects

JavaScript provides several ways to create a new Date object:

Current Date and Time:

javascript

	const now = new Date();
	console.log(now); // Outputs the current date and time

Specific Date and Time:

Using date string:

javascript

	const specificDate = new Date('2024-01-28T12:00:00');
	console.log(specificDate); // Outputs 2024-01-28 12:00:00

Using year, month, and day parameters:

javascript

	const specificDate = new Date(2024, 0, 28); // Note: Months are 0-indexed
	console.log(specificDate); // Outputs 2024-01-28

Timestamp (milliseconds since the Unix Epoch):

javascript

	const timestampDate = new Date(1700000000000);
	console.log(timestampDate); // Converts timestamp to date

Date Manipulation

Getting Date Components

getFullYear() - Returns the year.
getMonth() - Returns the month (0-11).
getDate() - Returns the day of the month.
getDay() - Returns the day of the week (0-6).

Example:

javascript

	const date = new Date();
	console.log(date.getFullYear()); // Outputs the current year
	console.log(date.getMonth()); // Outputs the current month (0-11)

Setting Date Components

setFullYear(year [, month, day]) - Sets the full year.
setMonth(month [, day]) - Sets the month.
setDate(day) - Sets the day of the month.

Example:

javascript

	const date = new Date();
	date.setFullYear(2025);
	date.setMonth(5); // June
	date.setDate(15);
	console.log(date); // Outputs 2025-06-15

Formatting Dates

JavaScript’s Date class includes methods to format the date to a string:

toString() - Converts the date to a string in the local timezone.
toUTCString() - Converts the date to a UTC string.
toLocaleDateString() - Returns the date portion in a locale-specific format.

Example:

javascript

	const date = new Date();
	console.log(date.toString()); // Local timezone (e.g. 2000-01-01T12:00:00.000Z)
	console.log(date.toUTCString()); // UTC timezone (e.g. Sat, 01 Jan 2000 12:00:00 GMT)
	console.log(date.toLocaleDateString('nb-NO')); // Norwegian format (e.g. 01.01.2000)

Working with Timezones in JavaScript

Timezone management is a crucial aspect of working with dates and times, especially in web applications that cater to a global audience.

Understanding Timezone Handling in JavaScript

JavaScript’s Date object operates in two timezones:

Local Timezone: The user’s local timezone, as determined by their system settings.
Coordinated Universal Time (UTC): A standard time, unaffected by daylight saving time.

Key Functions:

Local Timezone Methods: Methods like getHours(), getMinutes(), etc., operate in the local timezone.
UTC Methods: Methods prefixed with getUTC..., like getUTCHours(), getUTCMinutes(), etc., operate in UTC.

Working with UTC

JavaScript provides methods to work directly with UTC time, which can be particularly useful for applications that need a standard reference time.

Getting UTC Components

getUTCHours() - Returns the hour in UTC.
getUTCMinutes() - Returns the minutes in UTC.

Example:

javascript

	const date = new Date();
	console.log(date.getUTCHours()); // Outputs the hour in UTC
	console.log(date.getUTCMinutes()); // Outputs the minutes in UTC

Converting Local Time to UTC

To convert local time to UTC, you can use the Date object’s UTC methods.

Example:

javascript

	const localDate = new Date();
	const utcDate = new Date(Date.UTC(localDate.getFullYear(), localDate.getMonth(), localDate.getDate(), localDate.getHours(), localDate.getMinutes()));
	console.log(utcDate); // Outputs the UTC equivalent of localDate (e.g. 2000-01-01T12:00:00.000Z)

Timezone Conversion

For applications that need to display dates and times in various timezones, consider using libraries like moment-timezone or date-fns-tz, as native JavaScript does not provide straightforward methods for timezone conversion.

Lesson Task

Brief

We will look at using the Date class to manipulate dates and times in JavaScript.

Task 1: Convert to Oslo time

Create a function convertToOsloTime(date) that converts a given Date object to Oslo (Norway) time, considering the local timezone of the date. The function should return a Date object representing the equivalent time in Oslo.

Expected Outcome

Example:

javascript

	const date = new Date('2024-01-28T12:00:00Z'); // UTC time (12:00:00)
	console.log(convertToOsloTime(date)); // Should output the equivalent Oslo time (13:00:00)

Solution

javascript

	function convertToOsloTime(date) {
	  const osloTimezoneOffset = 60; // Oslo is UTC+1
	  const utcTime = date.getTime(); // Get UTC time
	  const osloTime = utcTime + (osloTimezoneOffset * 60 * 1000); // Add offset in milliseconds
	  return new Date(osloTime); // Return new Date object
	}

Task 2: Calculate days until next year

Create a function daysUntilNextYear() that calculates the number of days from the current date until the first day of the next year.

Expected Outcome

The function should return an integer representing the number of days left in the current year.

Solution:

javascript

	function daysUntilNextYear() {
	  const today = new Date();
	  const nextYear = new Date(today.getFullYear() + 1, 0, 1); // January 1st of next year
	  const difference = nextYear - today; // Difference in milliseconds
	  const days = Math.floor(difference / (1000 * 60 * 60 * 24)); // Convert to days
	  return days;
	}
	console.log(daysUntilNextYear());
	// Outputs the number of days until next year

Additional Resources

MDN Docs: Date