Lesson 9: JavaScript Date Object
Master JavaScript Date manipulation with interactive examples and real-world applications.
9.1 Introduction to the Date Object
The JavaScript Date object is used to work with dates and times. It provides methods to get and set date components, format dates, and perform date arithmetic.
Key features: The Date object allows you to create dates, extract components (year, month, day, etc.), set dates, format dates, and perform date calculations.
Example 9.1: Creating a Date Object
// Create a new Date object with current date and time
const now = new Date();
// Create a specific date
const specificDate = new Date(2023, 11, 25); // December 25, 2023
// Note: Months are 0-indexed (0=January, 11=December)
// Create from a date string
const dateFromString = new Date('2023-12-25T08:30:00');
document.write(`Current Date: ${now}`);
document.write(`<br>Specific Date: ${specificDate}`);
document.write(`<br>Date from String: ${dateFromString}`);
Current Date Display
Loading current date...
9.2 Getting Date Components
The Date object provides various methods to get specific components of a date:
Year
-
getFullYear()
Month
-
getMonth() (0-11)
Day
-
getDate() (1-31)
Week Day
-
getDay() (0-6)
Hours
-
getHours() (0-23)
Minutes
-
getMinutes() (0-59)
Seconds
-
getSeconds() (0-59)
Milliseconds
-
getMilliseconds()
Custom Date Components
Components will appear here
9.3 Setting Date Components
You can modify date components using setter methods:
const date = new Date();
// Set individual components
date.setFullYear(2024);
date.setMonth(5); // June (0-indexed)
date.setDate(15);
date.setHours(14);
date.setMinutes(30);
date.setSeconds(0);
date.setMilliseconds(0);
document.write(`Modified Date: ${date}`);
Date Builder
Your custom date will appear here
9.4 Formatting Dates
JavaScript provides several methods to format dates:
const date = new Date();
// Basic formatting methods
document.write(`toString(): ${date.toString()}`);
document.write(`<br>toDateString(): ${date.toDateString()}`);
document.write(`<br>toTimeString(): ${date.toTimeString()}`);
document.write(`<br>toLocaleDateString(): ${date.toLocaleDateString()}`);
document.write(`<br>toLocaleTimeString(): ${date.toLocaleTimeString()}`);
document.write(`<br>toUTCString(): ${date.toUTCString()}`);
// Custom formatting
const formattedDate = `${date.getFullYear()}-${(date.getMonth()+1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
document.write(`<br>Custom Format: ${formattedDate}`);
Date Formatting Demo
Formatted date will appear here
9.5 Date Arithmetic
You can perform arithmetic with dates using timestamps (milliseconds since 1970):
const today = new Date();
const tomorrow = new Date();
tomorrow.setDate(today.getDate() + 1);
// Calculate difference in days
const diffTime = tomorrow - today;
const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
document.write(`Tomorrow is ${diffDays} day(s) from today`);
// Add 30 days to a date
const futureDate = new Date();
futureDate.setDate(futureDate.getDate() + 30);
document.write(`<br>Date 30 days from now: ${futureDate.toDateString()}`);
Date Calculator
Result will appear here
9.6 Real-World Applications
Date objects are essential for many real-world applications:
9.6.1: Age Calculator
Your age will appear here
9.6.2: Countdown Timer
00
Days
00
Hours
00
Minutes
00
Seconds
9.6.3: Customized Greeting
Your personalized greeting will appear here