JavaScript Date & Time

Working with dates and times is essential for many applications. JavaScript provides the Date object for handling dates, times, and time zones.

📅 What are Dates in JavaScript?

JavaScript Date objects represent a single moment in time in a platform-independent format. Dates are stored as the number of milliseconds since January 1, 1970, UTC (the Unix epoch).

Date Characteristics:

Based on Unix timestamp (milliseconds since 1970)
Handles dates from about 285,616 years before/after 1970
Month indexing starts at 0 (January = 0)
Day of week indexing starts at 0 (Sunday = 0)
Timezone-aware (can work with local or UTC)

💡 Date Creation Methods

// Current date/time
new Date();

// Specific date
new Date(2024, 0, 15); // Jan 15, 2024
new Date("2024-01-15");
new Date("01/15/2024");

// From timestamp
new Date(1705300200000);

// Date.UTC() for UTC
Date.UTC(2024, 0, 15);

Important Notes:

• Months are 0-indexed (0 = January, 11 = December)
• Days of week are 0-indexed (0 = Sunday, 6 = Saturday)
• Two-digit years less than 50 are treated as 2000s
• Date strings should be in ISO 8601 format for reliability

🔧 Creating and Formatting Dates

Explore different ways to create dates and format them as strings.

JavaScript Editor

Creation

new Date()
new Date(year, month, day)
new Date(timestamp)
new Date(dateString)

String Formats

toString()
toDateString()
toTimeString()
toISOString()

Local Formats

toLocaleString()
toLocaleDateString()
toLocaleTimeString()

📊 Date Get Methods

Extract components from Date objects using get methods.

JavaScript Editor

Date Components

getFullYear() - 4-digit year
getMonth() - Month (0-11)
getDate() - Day of month (1-31)
getDay() - Day of week (0-6)

Time Components

getHours() - Hours (0-23)
getMinutes() - Minutes
getSeconds() - Seconds
getMilliseconds() - Milliseconds

Timestamps

getTime() - Milliseconds since 1970
getTimezoneOffset() - Timezone offset in minutes
valueOf() - Same as getTime()

⚙️ Date Set Methods

Modify Date objects using set methods.

JavaScript Editor

📌 Important Notes:

Set methods automatically adjust overflow (e.g., setDate(32) becomes next month)
Month parameter is 0-indexed in setMonth()
setTime() accepts milliseconds since 1970
UTC set methods set values in UTC time
Setting components returns the updated timestamp

🧮 Date Operations

Perform calculations and comparisons with dates.

JavaScript Editor

// Date Operations and Comparisons
let today = new Date();
let tomorrow = new Date(today);
tomorrow.setDate(today.getDate() + 1);

let nextWeek = new Date(today);
nextWeek.setDate(today.getDate() + 7);

let lastMonth = new Date(today);
lastMonth.setMonth(today.getMonth() - 1);

console.log("Today:", today.toDateString());
console.log("Tomorrow:", tomorrow.toDateString());
console.log("Next week:", nextWeek.toDateString());
console.log("Last month:", lastMonth.toDateString());

// Date comparisons
console.log("\nComparisons:");
console.log("Today == Tomorrow:", today == tomorrow); // false (different objects)
console.log("Today < Tomorrow:", today < tomorrow); // true
console.log("Today > Tomorrow:", today > tomorrow); // false
console.log("Today <= Tomorrow:", today <= tomorrow); // true

// Date difference in milliseconds
let diffMs = tomorrow - today;
let diffHours = diffMs / (1000 * 60 * 60);
let diffDays = diffMs / (1000 * 60 * 60 * 24);

console.log("\nTime differences:");
console.log("Milliseconds:", diffMs);
console.log("Hours:", diffHours);
console.log("Days:", diffDays);

// Adding/subtracting time
let futureDate = new Date(today);
futureDate.setHours(today.getHours() + 48); // Add 48 hours
console.log("\n48 hours from now:", futureDate);

Date Arithmetic:

Dates can be subtracted to get milliseconds
Add/subtract milliseconds to/from timestamps
Use set methods for date arithmetic
Consider timezone differences in calculations

Comparisons:

Use <, >, <=, >= for comparisons
== and === compare object references
Compare timestamps for equality
Consider milliseconds in exact comparisons

✨ Date Formatting

Format dates for display in various formats.

JavaScript Editor

// Date Formatting
let date = new Date(2024, 0, 15, 14, 30, 45);

// Built-in formats
console.log("Built-in formats:");
console.log("ISO:", date.toISOString());
console.log("UTC:", date.toUTCString());
console.log("Local:", date.toLocaleString());
console.log("Date only:", date.toLocaleDateString());
console.log("Time only:", date.toLocaleTimeString());

// Custom formatting
function formatDateCustom(date) {
  let year = date.getFullYear();
  let month = String(date.getMonth() + 1).padStart(2, '0');
  let day = String(date.getDate()).padStart(2, '0');
  let hours = String(date.getHours()).padStart(2, '0');
  let minutes = String(date.getMinutes()).padStart(2, '0');
  let seconds = String(date.getSeconds()).padStart(2, '0');
  
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}

console.log("\nCustom format:", formatDateCustom(date));

// Relative time formatting
function formatRelativeTime(date) {
  let now = new Date();
  let diffMs = now - date;
  let diffSeconds = Math.floor(diffMs / 1000);
  let diffMinutes = Math.floor(diffSeconds / 60);
  let diffHours = Math.floor(diffMinutes / 60);
  let diffDays = Math.floor(diffHours / 24);
  
  if (diffDays > 0) {
    return `${diffDays} day${diffDays !== 1 ? 's' : ''} ago`;
  } else if (diffHours > 0) {
    return `${diffHours} hour${diffHours !== 1 ? 's' : ''} ago`;
  } else if (diffMinutes > 0) {
    return `${diffMinutes} minute${diffMinutes !== 1 ? 's' : ''} ago`;
  } else {
    return "Just now";
  }
}

console.log("\nRelative time:", formatRelativeTime(new Date(Date.now() - 3600000))); // 1 hour ago

🎯 Intl.DateTimeFormat (Modern Approach):

// Locale-aware formatting
let formatter = new Intl.DateTimeFormat('en-US', {
  dateStyle: 'full',
  timeStyle: 'long'
});
console.log(formatter.format(new Date()));

// Relative time formatting
let rtf = new Intl.RelativeTimeFormat('en', {
  numeric: 'auto'
});
console.log(rtf.format(-1, 'day')); // "yesterday"

🌐 Timezone Handling

Work with different timezones and handle timezone conversions.

JavaScript Editor

// Timezone Handling
let date = new Date();

console.log("Local time:", date.toString());
console.log("UTC time:", date.toUTCString());

// Timezone offset in minutes
let timezoneOffset = date.getTimezoneOffset();
console.log("\nTimezone offset:", timezoneOffset, "minutes");
console.log("Timezone offset hours:", timezoneOffset / 60);

// Working with different timezones
function formatInTimezone(date, timezone) {
  return date.toLocaleString('en-US', {
    timeZone: timezone,
    weekday: 'long',
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    timeZoneName: 'short'
  });
}

console.log("\nDifferent timezones:");
console.log("New York:", formatInTimezone(date, 'America/New_York'));
console.log("London:", formatInTimezone(date, 'Europe/London'));
console.log("Tokyo:", formatInTimezone(date, 'Asia/Tokyo'));
console.log("Sydney:", formatInTimezone(date, 'Australia/Sydney'));

// Creating date in specific timezone
let utcDate = new Date(Date.UTC(2024, 0, 15, 10, 30, 0));
console.log("\nUTC date:", utcDate.toISOString());
console.log("Local from UTC:", utcDate.toString());

⚠️ Timezone Pitfalls:

JavaScript Date objects work in local timezone by default
Daylight Saving Time (DST) transitions can cause issues
Use UTC for storage and calculations
Convert to local time only for display
Consider using libraries like date-fns or Luxon for complex timezone handling

🎮 Date Practice Exercises

Implement the date manipulation functions below.

JavaScript Editor

💪 Additional Challenges:

Create a countdown timer function
Implement a function to get the week number of a date
Create a calendar generator for a given month/year
Build a function to handle recurring events
Implement timezone-aware scheduling

📋 Quick Reference

Common Get Methods:

getFullYear() / getMonth() / getDate()
getHours() / getMinutes() / getSeconds()
getTime() - Timestamp
getDay() - Day of week
getTimezoneOffset() - Timezone offset

Common Set Methods:

setFullYear() / setMonth() / setDate()
setHours() / setMinutes() / setSeconds()
setTime() - Set via timestamp
setMilliseconds()

← Number Methods Math in JavaScript →

JavaScript Tutorial

JavaScript Date & Time

📅 What are Dates in JavaScript?

Date Characteristics:

💡 Date Creation Methods

Important Notes:

🔧 Creating and Formatting Dates

Creation

String Formats

Local Formats

📊 Date Get Methods

Date Components

Time Components

Timestamps

⚙️ Date Set Methods

📌 Important Notes:

🧮 Date Operations

Date Arithmetic:

Comparisons:

✨ Date Formatting

🎯 Intl.DateTimeFormat (Modern Approach):

🌐 Timezone Handling

⚠️ Timezone Pitfalls:

🎮 Date Practice Exercises

💪 Additional Challenges:

📋 Quick Reference

Common Get Methods:

Common Set Methods:

Follow Us

Our Tools

Our Company

Special Tools