Docs
Module-09-Date-Time
Module 09: Date & Time
Master JavaScript's Date object for working with dates, times, formatting, calculations, and internationalization.
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ โ
โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
โ โ DATE & TIME IN JAVASCRIPT โ โ
โ โ โ โ
โ โ "Time is the most valuable thing a man can spend" โ โ
โ โ - Theophrastus โ โ
โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
โ โ
โ โโโโโโโโโโโโโโโโ โโโโโโโโโโโโโโโโ โโโโโโโโโโโโโโโโ โ
โ โ CREATE โ โ FORMAT โ โ CALCULATE โ โ
โ โ โโโโโโโโ โ โ โโโโโโโโ โ โ โโโโโโโโโโ โ โ
โ โ Date() โ โ toLocale* โ โ Add/Subtractโ โ
โ โ Timestamps โ โ Intl API โ โ Differences โ โ
โ โ Parsing โ โ ISO 8601 โ โ Comparisons โ โ
โ โโโโโโโโโโโโโโโโ โโโโโโโโโโโโโโโโ โโโโโโโโโโโโโโโโ โ
โ โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
๐ Module Overview
Understanding dates and times is essential for any JavaScript developer. From scheduling events to calculating durations, displaying timestamps, and handling time zones, this module covers everything you need to master temporal operations.
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ THE JAVASCRIPT DATE TIMELINE โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโค
โ โ
โ Unix Epoch Now โ
โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโบ โ
โ โ โ โ
โ Jan 1, 1970 00:00:00 UTC Your current timestamp โ
โ โ โ โ
โ โ โ โ
โ Negative โ Positive milliseconds โโโโโโโโโโโโโโโโโโโบโ โ
โ milliseconds โ โ โ
โ โ โ โ
โ 1969-12-31 โ 1970-01-02 2024-01-01 Today โ
โ -86400000 โ 86400000 1704067200000 Date.now() โ
โ โ โ โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
๐ Module Structure
9.1 Date Fundamentals
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ DATE OBJECT ANATOMY โ
โ โ
โ new Date(2024, 11, 25, 10, 30, 45, 500) โ
โ โ โ โ โ โ โ โ โ
โ โ โ โ โ โ โ โโโ milliseconds (0-999) โ
โ โ โ โ โ โ โโโโโโโ seconds (0-59) โ
โ โ โ โ โ โโโโโโโโโโโ minutes (0-59) โ
โ โ โ โ โโโโโโโโโโโโโโโ hours (0-23) โ
โ โ โ โโโโโโโโโโโโโโโโโโโ day (1-31) โ
โ โ โโโโโโโโโโโโโโโโโโโโโโโ month (0-11) โ ๏ธ 0-INDEXED! โ
โ โโโโโโโโโโโโโโโโโโโโโโโโโโโ year (full year) โ
โ โ
โ Result: Wed Dec 25 2024 10:30:45.500 โ
โ โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
- โขCreating Date objects - Multiple constructor patterns
- โขThe Unix Epoch and timestamps - The foundation of computer time
- โขMonth index gotcha - Why January is 0
- โขGetting/Setting components - Year, month, day, hours, etc.
- โขUTC vs local time - Understanding time zones
- โขDate parsing - ISO 8601 and other formats
- โขDate comparison - How to compare dates correctly
9.2 Date Formatting & Calculations
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ DATE FORMATTING OPTIONS โ
โ โ
โ const date = new Date('2024-12-25T10:30:00Z'); โ
โ โ
โ Built-in Methods: โ
โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
โ โ toString() โ "Wed Dec 25 2024 10:30:00 GMT+0000" โ โ
โ โ toISOString() โ "2024-12-25T10:30:00.000Z" โ
For storage โ โ
โ โ toLocaleDateString()โ "12/25/2024" (varies by locale) โ โ
โ โ toLocaleTimeString()โ "10:30:00 AM" (varies by locale) โ โ
โ โ toLocaleString() โ "12/25/2024, 10:30:00 AM" โ โ
โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
โ โ
โ Intl.DateTimeFormat (Recommended): โ
โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
โ โ new Intl.DateTimeFormat('en-US', { โ โ
โ โ weekday: 'long', // Monday โ โ
โ โ year: 'numeric', // 2024 โ โ
โ โ month: 'long', // December โ โ
โ โ day: 'numeric' // 25 โ โ
โ โ }).format(date) // โ "Wednesday, December 25, 2024" โ โ
โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
โ โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
- โขBuilt-in formatting methods - toISOString, toLocaleString, etc.
- โขIntl.DateTimeFormat - Locale-aware formatting
- โขCustom format functions - Building your own formatter
- โขDate arithmetic - Adding/subtracting time
- โขCalculating differences - Days, hours, minutes between dates
- โขRelative time - "2 days ago", "in 3 hours"
- โขBusiness day calculations - Excluding weekends/holidays
9.3 Internationalization (Intl)
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ INTL API FOR DATES โ
โ โ
โ Same Date, Different Locales: โ
โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
โ โ โ โ
โ โ const date = new Date('2024-12-25'); โ โ
โ โ โ โ
โ โ ๐บ๐ธ en-US โ "December 25, 2024" โ โ
โ โ ๐ฌ๐ง en-GB โ "25 December 2024" โ โ
โ โ ๐ฉ๐ช de-DE โ "25. Dezember 2024" โ โ
โ โ ๐ฏ๐ต ja-JP โ "2024ๅนด12ๆ25ๆฅ" โ โ
โ โ ๐ธ๐ฆ ar-SA โ "ูขูฅ ุฏูุณู
ุจุฑ ูขู ูขูค" โ โ
โ โ ๐จ๐ณ zh-CN โ "2024ๅนด12ๆ25ๆฅ" โ โ
โ โ โ โ
โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
โ โ
โ Intl.RelativeTimeFormat: โ
โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
โ โ rtf.format(-1, 'day') โ "yesterday" | "1 day ago" โ โ
โ โ rtf.format(-2, 'hour') โ "2 hours ago" โ โ
โ โ rtf.format(3, 'month') โ "in 3 months" โ โ
โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
โ โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
- โขLocale-aware formatting - Respecting regional preferences
- โขIntl.DateTimeFormat options - Complete customization
- โขIntl.RelativeTimeFormat - Human-friendly relative times
- โขTime zone handling - Working with timeZone option
- โขCalendar systems - Gregorian, Islamic, Hebrew, etc.
๐ฏ Key Concepts
Date Creation Methods
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ CREATING DATES โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโค
โ โ
โ Method โ Example โ Result โ
โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
โ No arguments โ new Date() โ Current time โ
โ Milliseconds โ new Date(0) โ Unix Epoch โ
โ ISO String โ new Date("2024-12-25") โ Midnight UTC โ
โ Date-time string โ new Date("2024-12-25T10:30") โ Local time โ
โ Date-time with Z โ new Date("2024-12-25T10:30Z")โ UTC โ
โ Components โ new Date(2024, 11, 25) โ Dec 25, local โ
โ Static method โ Date.now() โ Current ms โ
โ โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ ๏ธ Critical Gotchas
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ DATE GOTCHAS - LEARN THESE! โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโค
โ โ
โ โ GOTCHA #1: Months are 0-indexed โ
โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
โ โ new Date(2024, 12, 25) โ This is JANUARY 25, 2025! โ โ
โ โ new Date(2024, 11, 25) โ
This is December 25, 2024 โ โ
โ โ โ โ
โ โ January = 0 April = 3 July = 6 October = 9 โ โ
โ โ February = 1 May = 4 August = 7 November = 10 โ โ
โ โ March = 2 June = 5 September = 8 December = 11 โ โ
โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
โ โ
โ โ GOTCHA #2: Date-only strings are UTC โ
โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
โ โ new Date("2024-12-25") โ Midnight UTC (may be "yesterday"!) โ โ
โ โ new Date("2024-12-25T00:00") โ Midnight LOCAL time โ โ
โ โ new Date(2024, 11, 25) โ Midnight LOCAL time โ โ
โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
โ โ
โ โ GOTCHA #3: Dates are mutable โ
โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
โ โ const original = new Date(); โ โ
โ โ const copy = original; โ Same reference! โ โ
โ โ copy.setDate(1); // Also modifies original! โ โ
โ โ โ โ
โ โ const safeCopy = new Date(original); โ
Creates new instance โ โ
โ โ const safeCopy = new Date(original.getTime()); โ
Also works โ โ
โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
โ โ
โ โ GOTCHA #4: Comparing dates with === โ
โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
โ โ const d1 = new Date('2024-12-25'); โ โ
โ โ const d2 = new Date('2024-12-25'); โ โ
โ โ d1 === d2 โ false (different objects) โ โ
โ โ d1.getTime() === d2.getTime() โ
true โ โ
โ โ +d1 === +d2 โ
true (coerced to numbers) โ โ
โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
โ โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
Getters and Setters
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ DATE COMPONENT METHODS โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโค
โ โ
โ Component โ Getter โ Setter โ Range โ
โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
โ Year โ getFullYear() โ setFullYear() โ 4 digits โ
โ Month โ getMonth() โ setMonth() โ 0-11 โ
โ Date (day) โ getDate() โ setDate() โ 1-31 โ
โ Day of week โ getDay() โ N/A โ 0-6 (Sun-Sat) โ
โ Hours โ getHours() โ setHours() โ 0-23 โ
โ Minutes โ getMinutes() โ setMinutes() โ 0-59 โ
โ Seconds โ getSeconds() โ setSeconds() โ 0-59 โ
โ Milliseconds โ getMilliseconds() โ setMilliseconds() โ 0-999 โ
โ Timestamp โ getTime() โ setTime() โ ms since epoch โ
โ โ
โ UTC versions: getUTCFullYear(), getUTCMonth(), getUTCDate(), etc. โ
โ โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
๐ Formatting Comparison
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ WHEN TO USE EACH FORMAT โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโค
โ โ
โ toISOString() โ
โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
โ โ Output: "2024-12-25T10:30:00.000Z" โ โ
โ โ Use for: โ
APIs โ
Storage โ
Databases โ
Sorting โ โ
โ โ Pros: Universal, unambiguous, sortable as string โ โ
โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
โ โ
โ toLocaleDateString() / toLocaleTimeString() / toLocaleString() โ
โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
โ โ Output: "12/25/2024, 10:30:00 AM" (varies by locale) โ โ
โ โ Use for: โ
User display โ
Quick formatting โ โ
โ โ Pros: Locale-aware, easy to use โ โ
โ โ Cons: Output varies, less control โ โ
โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
โ โ
โ Intl.DateTimeFormat โ
โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
โ โ Output: Fully customizable per locale โ โ
โ โ Use for: โ
Production apps โ
Full control โ
Performance โ โ
โ โ Pros: Cached formatters, complete customization โ โ
โ โ Cons: Slightly more verbose setup โ โ
โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
โ โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
๐งฎ Date Arithmetic
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ DATE CALCULATIONS โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโค
โ โ
โ Adding/Subtracting Time: โ
โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
โ โ // Add 7 days (using setters - auto rollover) โ โ
โ โ date.setDate(date.getDate() + 7); โ โ
โ โ โ โ
โ โ // Add 2 hours โ โ
โ โ date.setHours(date.getHours() + 2); โ โ
โ โ โ โ
โ โ // Add 3 months โ โ
โ โ date.setMonth(date.getMonth() + 3); โ โ
โ โ โ โ
โ โ // Using milliseconds (pure/immutable approach) โ โ
โ โ const MS_PER_DAY = 24 * 60 * 60 * 1000; // 86,400,000 โ โ
โ โ const newDate = new Date(date.getTime() + 7 * MS_PER_DAY); โ โ
โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
โ โ
โ Calculating Differences: โ
โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
โ โ const diffMs = date2 - date1; // Automatic coercion to ms โ โ
โ โ โ โ
โ โ const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24)); โ โ
โ โ const diffHours = Math.floor(diffMs / (1000 * 60 * 60)); โ โ
โ โ const diffMinutes = Math.floor(diffMs / (1000 * 60)); โ โ
โ โ const diffSeconds = Math.floor(diffMs / 1000); โ โ
โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
โ โ
โ Time Constants (milliseconds): โ
โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
โ โ const MS = { โ โ
โ โ SECOND: 1000, โ โ
โ โ MINUTE: 60 * 1000, // 60,000 โ โ
โ โ HOUR: 60 * 60 * 1000, // 3,600,000 โ โ
โ โ DAY: 24 * 60 * 60 * 1000, // 86,400,000 โ โ
โ โ WEEK: 7 * 24 * 60 * 60 * 1000 // 604,800,000 โ โ
โ โ }; โ โ
โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
โ โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
๐ก Common Operations Quick Reference
// โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
// TODAY AT MIDNIGHT (local time)
// โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
const today = new Date();
today.setHours(0, 0, 0, 0);
// โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
// START/END OF DAY, MONTH, YEAR
// โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
const startOfDay = new Date(date);
startOfDay.setHours(0, 0, 0, 0);
const endOfDay = new Date(date);
endOfDay.setHours(23, 59, 59, 999);
const startOfMonth = new Date(date.getFullYear(), date.getMonth(), 1);
const endOfMonth = new Date(date.getFullYear(), date.getMonth() + 1, 0);
const startOfYear = new Date(date.getFullYear(), 0, 1);
const endOfYear = new Date(date.getFullYear(), 11, 31, 23, 59, 59, 999);
// โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
// IS SAME DAY
// โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
function isSameDay(d1, d2) {
return (
d1.getFullYear() === d2.getFullYear() &&
d1.getMonth() === d2.getMonth() &&
d1.getDate() === d2.getDate()
);
}
// โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
// DAYS BETWEEN DATES
// โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
const daysBetween = Math.floor((date2 - date1) / (1000 * 60 * 60 * 24));
// โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
// ADD/SUBTRACT TIME
// โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
function addDays(date, days) {
const result = new Date(date);
result.setDate(result.getDate() + days);
return result;
}
// โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
// FORMAT DATE (Intl way - recommended)
// โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
const formatter = new Intl.DateTimeFormat('en-US', {
weekday: 'long',
year: 'numeric',
month: 'long',
day: 'numeric',
});
formatter.format(date); // "Wednesday, December 25, 2024"
// โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
// RELATIVE TIME
// โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
const rtf = new Intl.RelativeTimeFormat('en', { numeric: 'auto' });
rtf.format(-1, 'day'); // "yesterday"
rtf.format(-2, 'hour'); // "2 hours ago"
rtf.format(3, 'month'); // "in 3 months"
// โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
// IS WEEKEND
// โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
const isWeekend = date.getDay() === 0 || date.getDay() === 6;
// โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
// IS LEAP YEAR
// โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
function isLeapYear(year) {
return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;
}
// โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
// DAYS IN MONTH
// โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
function daysInMonth(year, month) {
return new Date(year, month + 1, 0).getDate();
}
โ Best Practices
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ DATE BEST PRACTICES โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโค
โ โ
โ 1. STORE DATES IN UTC โ
โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
โ // Store โ
โ const stored = date.toISOString(); // "2024-12-25T10:30:00.000Z" โ
โ // Retrieve โ
โ const restored = new Date(stored); โ
โ โ
โ 2. DISPLAY IN LOCAL TIME โ
โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
โ // Let browser convert to user's timezone โ
โ date.toLocaleString('en-US', { timeZone: 'America/New_York' }); โ
โ โ
โ 3. USE ISO 8601 FOR DATA EXCHANGE โ
โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
โ // API requests/responses โ
โ { "createdAt": "2024-12-25T10:30:00.000Z" } โ
โ โ
โ 4. CLONE BEFORE MODIFYING โ
โ โโโโโโโโโโโโโโโโโโโโโโโโ โ
โ const copy = new Date(original); // Always clone! โ
โ copy.setDate(copy.getDate() + 1); โ
โ โ
โ 5. USE getTime() FOR COMPARISON โ
โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
โ if (date1.getTime() < date2.getTime()) { ... } โ
โ // Or use operators: if (date1 < date2) { ... } โ
โ โ
โ 6. CONSIDER LIBRARIES FOR COMPLEX OPS โ
โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
โ // For complex timezone handling, recurring dates, business days โ
โ // Consider: date-fns, Temporal API (when stable), or Luxon โ
โ โ
โ 7. CACHE Intl FORMATTERS โ
โ โโโโโโโโโโโโโโโโโโโโโโโโ โ
โ // Create once, reuse many times โ
โ const dateFormatter = new Intl.DateTimeFormat('en-US', options); โ
โ dates.map(d => dateFormatter.format(d)); // Efficient! โ
โ โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
๐ฏ Learning Path
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ SUGGESTED LEARNING ORDER โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโค
โ โ
โ Week 1: Fundamentals โ
โ โโโ Understand the Date object and timestamps โ
โ โโโ Master the 0-indexed month gotcha โ
โ โโโ Practice creating dates in different ways โ
โ โโโ Learn getters and setters โ
โ โ
โ Week 2: Formatting โ
โ โโโ Use toISOString for storage โ
โ โโโ Master Intl.DateTimeFormat โ
โ โโโ Build custom format functions โ
โ โโโ Implement relative time with Intl.RelativeTimeFormat โ
โ โ
โ Week 3: Calculations โ
โ โโโ Add/subtract days, months, years โ
โ โโโ Calculate differences between dates โ
โ โโโ Handle edge cases (DST, leap years) โ
โ โโโ Build date utility functions โ
โ โ
โ Week 4: Advanced โ
โ โโโ Time zone handling โ
โ โโโ Calendar calculations (business days, etc.) โ
โ โโโ Performance optimization (caching formatters) โ
โ โโโ Build real-world date components โ
โ โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
๐ Section Files
| Section | Topic | Key Files |
|---|---|---|
| 9.1 | Date Fundamentals | 01-creating-dates.js, 02-timestamps.js, 03-components.js |
| 9.2 | Formatting & Calculations | 01-formatting.js, 02-calculations.js, 03-relative-time.js |
| 9.3 | Internationalization | 01-intl-date-format.js, 02-relative-time-format.js |
๐ Related Modules
- โขPrevious: Module 08 - Numbers & Math
- โขNext: Module 10 - Objects
- โขRelated: Module 07 - Strings (for date string parsing)
๐ The Future: Temporal API
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ COMING SOON: TEMPORAL API โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโค
โ โ
โ The Temporal API is a modern replacement for Date that solves its issues: โ
โ โ
โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
โ โ // Immutable by default โ โ
โ โ const date = Temporal.PlainDate.from('2024-12-25'); โ โ
โ โ const nextWeek = date.add({ days: 7 }); // Returns new object โ โ
โ โ โ โ
โ โ // Month is 1-indexed (finally!) โ โ
โ โ const dec = Temporal.PlainDate.from({ year: 2024, month: 12, day: 25 });โ
โ โ โ โ
โ โ // Built-in timezone support โ โ
โ โ const zoned = Temporal.ZonedDateTime.from( โ โ
โ โ '2024-12-25T10:30[America/New_York]' โ โ
โ โ ); โ โ
โ โ โ โ
โ โ // Duration objects โ โ
โ โ const duration = Temporal.Duration.from({ hours: 2, minutes: 30 });โ โ
โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
โ โ
โ Status: Stage 3 proposal - coming to browsers soon! โ
โ โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ