JavaScript Date Functions
š The Most Hated Part of JavaScript: Date
JavaScript's Date object has a reputation for being terrible, and honestly, much of it is deserved. But with the right understanding, it becomes manageable.
In this cheatsheet, we'll learn how to create, read, modify, and format dates with the built-in Date object.
ā Creating dates ā Getting date parts ā Setting date parts ā Formatting dates ā Comparing dates ā Timestamps ā Useful patterns
#javascript #date #datetime #formatting #webdev #frontend #coding #tips #time
Creating dates
The Date object in JavaScript represents a single moment in time, stored as the number of milliseconds since January 1, 1970 UTC.
const now = new Date(); // current date and time
const specific = new Date("2024-07-12"); // from ISO string
const fromParts = new Date(2024, 6, 12, 10, 30, 0); // year, month (0-based), day
const fromTimestamp = new Date(1720771200000); // from millisecondsGetting date parts
| Method | Description | Example |
|---|---|---|
getFullYear() | Four-digit year | 2024 |
getMonth() | Month index (0-11) | 6 for July |
getDate() | Day of the month (1-31) | 12 |
getDay() | Day of the week (0-6) | 5 for Friday |
getHours() | Hour (0-23) | 10 |
getMinutes() | Minutes (0-59) | 30 |
getSeconds() | Seconds (0-59) | 0 |
getMilliseconds() | Milliseconds (0-999) | 0 |
getTime() | Timestamp in milliseconds | 1720771200000 |
const date = new Date("2024-07-12T10:30:00");
date.getFullYear(); // 2024
date.getMonth(); // 6
date.getDate(); // 12
date.getHours(); // 10Setting date parts
const date = new Date();
date.setFullYear(2025);
date.setMonth(0); // January
date.setDate(1);
date.setHours(9, 0, 0, 0);Formatting dates
Use toLocaleDateString and toLocaleTimeString for localized formatting.
const date = new Date("2024-07-12T10:30:00");
date.toLocaleDateString("en-US"); // "7/12/2024"
date.toLocaleDateString("en-GB"); // "12/07/2024"
date.toLocaleTimeString("en-US"); // "10:30:00 AM"Formatting with options
Pass an options object to control the output format.
const date = new Date("2024-07-12T10:30:00");
const options = {
weekday: "long",
year: "numeric",
month: "long",
day: "numeric",
};
date.toLocaleDateString("en-US", options); // "Friday, July 12, 2024"Time formatting options.
const timeOptions = {
hour: "2-digit",
minute: "2-digit",
second: "2-digit",
hour12: false,
};
date.toLocaleTimeString("en-US", timeOptions); // "10:30:00"ISO string
Convert a date to an ISO 8601 string.
const date = new Date("2024-07-12T10:30:00Z");
date.toISOString(); // "2024-07-12T10:30:00.000Z"UTC methods
Use UTC methods when working with universal time.
const date = new Date("2024-07-12T10:30:00Z");
date.getUTCFullYear(); // 2024
date.getUTCMonth(); // 6
date.getUTCDate(); // 12
date.getUTCHours(); // 10Comparing dates
Convert dates to timestamps for comparisons.
const a = new Date("2024-07-12");
const b = new Date("2024-07-15");
a < b; // true ā
a.getTime() === b.getTime(); // false ā
Timestamps
Get the current timestamp in milliseconds.
Date.now(); // 1720771200000
const start = Date.now();
// ... do work
const end = Date.now();
console.log(end - start); // elapsed millisecondsFull-Stack AI Developer Roadmap
From HTML & CSS to working with AI models, all in one structured roadmap.
