JS Dates

Think of a world clock display in an airport, showing the current time in cities across the globe, each one accurate for its own timezone, all tracked from the same underlying moment. JavaScript's Date object is that internal clock for your code, letting you capture the current moment, build a specific date, and pull out pieces like the year, month, or day for display or calculation. Dates matter for an international audience visiting cookiescursor.com, showing when a tutorial was published or calculating how long ago someone last logged in are both common, practical uses.

In this page:

Creating Date Objects
Getting Date Parts
Formatting Dates
Comparing Dates
Timestamps

Creating Date Objects

new Date() with no arguments creates a Date object representing the current moment, while passing a year, month, and day creates a Date representing that specific point in time.

Note: When building a specific date, remember the month argument is zero-based, so January is 0 and December is 11.

Warning: new Date('some string') can behave inconsistently across different browsers for ambiguous formats, prefer numeric arguments for reliability.

Example: Creating Date Objects

javascript

const now = new Date();
const specific = new Date(2024, 0, 15);
console.log(now);
console.log(specific);

Getting Date Parts

Methods like getFullYear(), getMonth(), getDate(), and getDay() extract individual pieces of a Date object, the year, month, day of the month, and day of the week respectively.

Note: getDay() returns the day of the week as a number, 0 for Sunday through 6 for Saturday, useful for custom weekday labels.

Warning: getMonth() returns 0 through 11, always add 1 if you want to display a human-friendly month number.

Example: Getting Date Parts

javascript

const date = new Date(2024, 5, 20);
console.log(date.getFullYear());
console.log(date.getMonth());
console.log(date.getDate());
console.log(date.getDay());

Formatting Dates

toLocaleDateString() and toLocaleTimeString() format a Date object into a readable string based on locale conventions, letting the same date display naturally for visitors in different regions.

Note: Passing a locale code, like en-GB or de-DE, to toLocaleDateString() lets you format a date according to a specific regional convention.

Warning: Without specifying a locale, formatting output depends on the visitor's browser and system settings, which can vary between users.

Example: Formatting Dates

javascript

const date = new Date(2024, 5, 20);
console.log(date.toLocaleDateString());
console.log(date.toLocaleTimeString());

Comparing Dates

Date objects can be compared using relational operators like < and >, which JavaScript converts to timestamps automatically, though for equality checks it's more reliable to explicitly compare their getTime() values.

Note: getTime() returns the number of milliseconds since January 1, 1970, a universal reference point that makes precise comparison straightforward.

Warning: Using === to compare two different Date objects representing the same moment returns false, since they're different object instances, not equal values.

Example: Comparing Dates

javascript

const d1 = new Date(2024, 0, 1);
const d2 = new Date(2024, 5, 1);
console.log(d1 < d2);
console.log(d1.getTime() === d2.getTime());

Timestamps

A timestamp is the number of milliseconds elapsed since January 1, 1970 (the Unix epoch), obtained from Date.now() for the current moment or getTime() on an existing Date object, and it's a universal, timezone-independent way to represent a moment.

Note: Timestamps are ideal for storing dates in a database or comparing durations, since they're simple numbers rather than complex objects.

Warning: Date.now() returns a number, not a Date object, calling Date methods directly on its result will fail without wrapping it in new Date() first.

Example: Timestamps

javascript

console.log(Date.now());
const date = new Date();
console.log(date.getTime());

Common Mistakes

Forgetting that getMonth() returns a zero-based value, January is 0, not 1, a very common source of off-by-one bugs.
Assuming Date objects automatically format nicely for display, they require explicit formatting methods to look presentable.
Comparing dates with == or === directly, which compares object references rather than the actual moments in time they represent.

Chapter Summary

The Date object represents a specific moment in time and can be created for the current moment or a specific date.
Methods like getFullYear, getMonth, and getDate extract individual pieces of a date.
Dates can be compared by converting them to timestamps with getTime(), and formatted for display with methods like toLocaleDateString.

Browser Support

The Date object and its core methods are supported identically in every browser, though locale-based formatting output can vary slightly by system settings.

🔒

Chapter Quiz — Complete all 26 topics to unlock

0/26 topics done

Complete these topics first:

← Previous Lesson JS Typed Arrays Next Lesson → JS Date Set

JS Dates

Creating Date Objects

Getting Date Parts

Formatting Dates

Comparing Dates

Timestamps

Chapter Quiz — Complete all 26 topics to unlock

Login to run this code