← Back to JavaScript Course | Chapter 4: Modern JS, Async & DOM | Lesson 1 of 26

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:

  1. Creating Date Objects
  2. Getting Date Parts
  3. Formatting Dates
  4. Comparing Dates
  5. Timestamps
Syntax
javascript 
const date = new Date();
const date = new Date(year, month, day);
date.getFullYear();
date.getMonth();

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 
// Declare the constant `now` as a new `Date` instance
// Declare the constant `now` as a new `Date` instance
const now = new Date();
// Declare the constant `specific` as a new `Date` instance
// Declare the constant `specific` as a new `Date` instance
const specific = new Date(2024, 0, 15);
// Print `now` to the console
// Print `now` to the console
console.log(now);
// Print `specific` to the console
// Print `specific` to the console
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 
// Declare the constant `date` as a new `Date` instance
// Declare the constant `date` as a new `Date` instance
const date = new Date(2024, 5, 20);
// Print `date.getFullYear()` to the console
// Print `date.getFullYear()` to the console
console.log(date.getFullYear());
// Print `date.getMonth()` to the console
// Print `date.getMonth()` to the console
console.log(date.getMonth());
// Print `date.getDate()` to the console
// Print `date.getDate()` to the console
console.log(date.getDate());
// Print `date.getDay()` to the console
// Print `date.getDay()` to the console
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 
// Declare the constant `date` as a new `Date` instance
// Declare the constant `date` as a new `Date` instance
const date = new Date(2024, 5, 20);
// Print `date.toLocaleDateString()` to the console
// Print `date.toLocaleDateString()` to the console
console.log(date.toLocaleDateString());
// Print `date.toLocaleTimeString()` to the console
// Print `date.toLocaleTimeString()` to the console
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 
// Declare the constant `d1` as a new `Date` instance
// Declare the constant `d1` as a new `Date` instance
const d1 = new Date(2024, 0, 1);
// Declare the constant `d2` as a new `Date` instance
// Declare the constant `d2` as a new `Date` instance
const d2 = new Date(2024, 5, 1);
// Print `d1 < d2` to the console
// Print `d1 < d2` to the console
console.log(d1 < d2);
// Print `d1.getTime() === d2.getTime()` to the console
// Print `d1.getTime() === d2.getTime()` to the console
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 
// Print `Date.now()` to the console
// Print `Date.now()` to the console
console.log(Date.now());
// Declare the constant `date` as a new `Date` instance
// Declare the constant `date` as a new `Date` instance
const date = new Date();
// Print `date.getTime()` to the console
// Print `date.getTime()` to the console
console.log(date.getTime());
Live Example
Related Topics

JS Math · JS Conditionals · JS Switch · JS Loop For

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
Common Mistakes
  1. Forgetting that getMonth() returns a zero-based value, January is 0, not 1, a very common source of off-by-one bugs.
  2. Assuming Date objects automatically format nicely for display, they require explicit formatting methods to look presentable.
  3. 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

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.