Under the hood, JavaScript represents every date as a millisecond timestamp counted from the Unix Epoch (January 1, 1970). This lesson covers creating and reading Date objects, the notorious 0-indexed month system, using getters and setters to read and mutate dates, and formatting them correctly with toLocaleDateString().
1JS Dates | JavaScript Tutorial - In-Depth Guide Part 1
Time is complex. In JavaScript, we handle dates and times using the global 'Date' object. It's essentially a millisecond counter.
// Mastering Time in JSMastering Time
2JS Dates | JavaScript Tutorial - In-Depth Guide Part 2
Calling 'new Date()' without arguments creates an object representing the exact moment the code is executed.
const now = new Date();
console.log(now); // Current timeThe Current Moment
3JS Dates | JavaScript Tutorial - In-Depth Guide Part 3
Under the hood, every date is a 'Timestamp': the number of milliseconds passed since Jan 1, 1970 (the Unix Epoch).
const timestamp = Date.now();
console.log(timestamp); // e.g. 1714596000000Unix Epoch Timestamp
4JS Dates | JavaScript Tutorial - In-Depth Guide Part 4
To extract parts of a date, use Getters. Be careful: .getMonth() returns 0-11, while .getDate() returns 1-31.
const d = new Date();
const year = d.getFullYear();
const month = d.getMonth(); // Jan = 0Property Getters
5JS Dates | JavaScript Tutorial - In-Depth Guide Part 5
You can also change a date using Setters. This 'mutates' the original date object.
const d = new Date();
d.setFullYear(2099);
console.log(d);Property Setters
6JS Dates | JavaScript Tutorial - In-Depth Guide Part 6
Localization: Never format date strings manually. Use .toLocaleDateString() to handle different cultures automatically.
const d = new Date();
console.log(d.toLocaleDateString('es-ES'));
// 01/05/2026Formatting & Locales
7JS Dates | JavaScript Tutorial - In-Depth Guide Part 7
Time Logic: Now you can calculate durations, build calendars, and track user sessions with precision.
<h1>Clock: Synced</h1>Clock: Synced
8JS Dates | JavaScript Tutorial - In-Depth Guide Part 8
Date fundamentals mastered! You are now ready to handle temporal data in your applications.
<h1>Temporal: Mastered</h1>Temporal: Mastered
9JS Dates | JavaScript Tutorial - In-Depth Guide Part 9
Finally, we'll master 'Debugging'—the art of finding and fixing errors in your code.
<h1>Next: Debugging Tools</h1>On to Debugging
10Step-by-Step Breakdown
Time is complex. In JavaScript, we handle dates and times using the global 'Date' object. It's essentially a millisecond counter.
Calling 'new Date()' without arguments creates an object representing the exact moment the code is executed.
Under the hood, every date is a 'Timestamp': the number of milliseconds passed since Jan 1, 1970 (the Unix Epoch).
Checkpoint: What happens to the month number if you use January in a numeric Date constructor?
- →It is 1
- →It is 0 (JS months are 0-indexed)
To extract parts of a date, use Getters. Be careful: .getMonth() returns 0-11, while .getDate() returns 1-31.
You can also change a date using Setters. This 'mutates' the original date object.
Checkpoint: Which method should you use to get the day of the month (1-31)?
- →getDay() (returns day of week 0-6)
- →getDate() (returns day of month 1-31)
Localization: Never format date strings manually. Use .toLocaleDateString() to handle different cultures automatically.
Time Logic: Now you can calculate durations, build calendars, and track user sessions with precision.
Checkpoint: What is the unit of measurement for a JavaScript timestamp?
- →Seconds
- →Milliseconds
Date fundamentals mastered! You are now ready to handle temporal data in your applications.
Finally, we'll master 'Debugging'—the art of finding and fixing errors in your code.
Level Up 🚀
Advanced cheat sheets, SEO tricks, and interview prep for this topic.
Browser Support
Fully supported.
Fully supported.
Fully supported.
Fully supported.
Accessibility (A11y)
1Use the <time> Element with a Machine-Readable datetime Attribute
A human-friendly date string like '04/11/24' is ambiguous to screen readers and to machines. Wrapping it in <time datetime="2024-11-04">Nov 4, 2024</time> gives assistive technology and search engines an unambiguous, standardized value while still showing readable text to sighted users.
<time datetime="2024-11-04">November 4, 2024</time>SEO Implications
- 1
Ambiguous Date Formats Can Confuse Structured Data and Search Snippets
Search engines rely on ISO 8601 formatted dates (YYYY-MM-DD) in structured data (like article publish dates) to display accurate 'published on' or 'updated on' snippets in results. Using a locale-ambiguous format like MM/DD/YY in your markup risks the wrong date being parsed and shown to searchers.
Best Practices
Never Compare Dates with ===
Two Date objects representing the exact same moment are still different object references, so `new Date('2024-01-01') === new Date('2024-01-01')` is always false. Compare their timestamps instead with `.getTime()`, e.g. `date1.getTime() === date2.getTime()`.
Always Account for the 0-Indexed Month When Constructing a Date Numerically
new Date(2025, 0, 1) means January 1, 2025, not January of year 0 — the year and day are 1-indexed as expected, but the month argument is 0-indexed. Passing a month value straight from user input (which is usually 1-12) without subtracting 1 is a frequent off-by-one bug.
Frequent Bugs
Comparing two Date objects with === or == always returns false, even when they represent the same date.
Date objects are compared by reference, not by value, just like any other JavaScript object. Convert both to a primitive number with getTime() (or use the unary + operator, e.g. `+date1 === +date2`) to compare the actual timestamps.
Real-World Examples
Calculating Days Remaining Until a Deadline
A project dashboard needed to show users how many days remained until a task's due date, calculated purely from two Date objects.
function daysUntil(dueDate) {
const msPerDay = 1000 * 60 * 60 * 24;
const diff = dueDate.getTime() - Date.now();
return Math.ceil(diff / msPerDay);
}
daysUntil(new Date('2026-08-01')); // e.g. 5