Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
Temporal is a new proposal for JavaScript that fixes Date object issues. It provides separate types for dates, times, time zones, and durations with an intuitive, immutable API.
Old Date object has confusing month numbers (0-11), timezone issues, and can be changed accidentally
Months are 1-12 (like normal!), separate types for dates/times, can't be changed by accident
Expected in 2025+. You can use it today with a polyfill library!
PlainDateJust a date: "2024-12-14"
PlainTimeJust time: "15:30:00"
PlainDateTimeDate + time (no timezone)
ZonedDateTimeDate + time + timezone!
Temporal dates can't be changed! When you "modify" them, you get a new date instead:
const tomorrow = today.add({ days: 1 })✅ today stays the same, tomorrow is new!
Temporal is not defined errors. To use Temporal today, install the polyfill: npm install @js-temporal/polyfillnpm install @js-temporal/polyfill// At the top of your file
import { Temporal } from '@js-temporal/polyfill';
// Now you can use Temporal!
const today = Temporal.Now.plainDateISO();
console.log(today.toString());// Create dates (no time, no timezone)
const today = Temporal.Now.plainDateISO();
console.log(today.toString()); // "2024-12-14"
// From components (months are 1-12, not 0-11!)
const date = Temporal.PlainDate.from({
year: 2024,
month: 12, // December = 12 (not 11!)
day: 14
});
// From ISO string
const date2 = Temporal.PlainDate.from('2024-12-14');
// Get components
console.log(date.year); // 2024
console.log(date.month); // 12 (December!)
console.log(date.day); // 14
console.log(date.dayOfWeek); // 6 (Saturday, 1=Monday)
console.log(date.dayOfYear); // 349
// Add/subtract (immutable!)
const tomorrow = date.add({ days: 1 });
console.log(tomorrow.toString()); // "2024-12-15"
const nextWeek = date.add({ weeks: 1 });
const nextMonth = date.add({ months: 1 });
const nextYear = date.add({ years: 1 });
// Compare dates
console.log(Temporal.PlainDate.compare(date, tomorrow)); // -1
console.log(date.equals(date2)); // true// Current time
const now = Temporal.Now.plainTimeISO();
console.log(now.toString()); // "15:30:45.123456789"
// From components
const time = Temporal.PlainTime.from({
hour: 15,
minute: 30,
second: 45
});
// From ISO string
const time2 = Temporal.PlainTime.from('15:30:45');
// Get components
console.log(time.hour); // 15
console.log(time.minute); // 30
console.log(time.second); // 45
console.log(time.millisecond); // 0
console.log(time.microsecond); // 0
console.log(time.nanosecond); // 0
// Add/subtract
const later = time.add({ hours: 2, minutes: 30 });
console.log(later.toString()); // "18:00:45"
// Round to nearest hour
const rounded = time.round({ smallestUnit: 'hour' });
console.log(rounded.toString()); // "16:00:00"// Current date and time
const now = Temporal.Now.plainDateTimeISO();
console.log(now.toString()); // "2024-12-14T15:30:45.123456789"
// From components
const dt = Temporal.PlainDateTime.from({
year: 2024,
month: 12,
day: 14,
hour: 15,
minute: 30
});
// From ISO string
const dt2 = Temporal.PlainDateTime.from('2024-12-14T15:30:00');
// Get date and time parts
console.log(dt.toPlainDate().toString()); // "2024-12-14"
console.log(dt.toPlainTime().toString()); // "15:30:00"
// All date properties
console.log(dt.year, dt.month, dt.day); // 2024 12 14
// All time properties
console.log(dt.hour, dt.minute, dt.second); // 15 30 0
// Add/subtract
const later = dt.add({ days: 1, hours: 2 });
console.log(later.toString()); // "2024-12-15T17:30:00"
// With time zone
const zoned = dt.toZonedDateTime('America/New_York');
console.log(zoned.toString());// Current date/time in specific timezone
const nyTime = Temporal.Now.zonedDateTimeISO('America/New_York');
console.log(nyTime.toString());
// "2024-12-14T05:30:00-05:00[America/New_York]"
const tokyoTime = Temporal.Now.zonedDateTimeISO('Asia/Tokyo');
console.log(tokyoTime.toString());
// "2024-12-14T19:30:00+09:00[Asia/Tokyo]"
// From components with timezone
const meeting = Temporal.ZonedDateTime.from({
year: 2024,
month: 12,
day: 25,
hour: 10,
minute: 0,
timeZone: 'America/Los_Angeles'
});
// Convert between timezones
const meetingInNY = meeting.withTimeZone('America/New_York');
console.log(meeting.toString()); // "10:00 PST"
console.log(meetingInNY.toString()); // "13:00 EST"
// Get timezone info
console.log(meeting.timeZoneId); // "America/Los_Angeles"
console.log(meeting.offset); // "-08:00"
// Instant (exact moment in time, no timezone)
const instant = meeting.toInstant();
console.log(instant.toString()); // UTC timestamp// Create duration
const duration = Temporal.Duration.from({
days: 2,
hours: 5,
minutes: 30
});
console.log(duration.toString()); // "P2DT5H30M"
// Add duration to date
const date = Temporal.PlainDate.from('2024-12-14');
const future = date.add(duration);
console.log(future.toString()); // "2024-12-16"
// Calculate difference between dates
const start = Temporal.PlainDate.from('2024-12-14');
const end = Temporal.PlainDate.from('2024-12-25');
const diff = start.until(end);
console.log(diff.days); // 11
console.log(diff.toString()); // "P11D"
// Different units
const diffInWeeks = start.until(end, { largestUnit: 'week' });
console.log(diffInWeeks.weeks, diffInWeeks.days); // 1 week, 4 days
// With time
const dt1 = Temporal.PlainDateTime.from('2024-12-14T10:00');
const dt2 = Temporal.PlainDateTime.from('2024-12-14T15:30');
const timeDiff = dt1.until(dt2);
console.log(timeDiff.hours); // 5
console.log(timeDiff.minutes); // 30
// Total in specific unit
console.log(timeDiff.total({ unit: 'minute' })); // 330 minutes// ISO 8601 strings
const date = Temporal.PlainDate.from('2024-12-14');
console.log(date.toString()); // "2024-12-14"
const time = Temporal.PlainTime.from('15:30:45');
console.log(time.toString()); // "15:30:45"
const dt = Temporal.PlainDateTime.from('2024-12-14T15:30:45');
console.log(dt.toString()); // "2024-12-14T15:30:45"
// With Intl.DateTimeFormat
const formatted = new Intl.DateTimeFormat('en-US', {
dateStyle: 'full',
timeStyle: 'short'
}).format(dt.toZonedDateTime('UTC'));
console.log(formatted);
// "Saturday, December 14, 2024 at 3:30 PM"
// toJSON for serialization
console.log(date.toJSON()); // "2024-12-14"
// Parse various formats
const date1 = Temporal.PlainDate.from('2024-12-14');
const date2 = Temporal.PlainDate.from({ year: 2024, month: 12, day: 14 });
const date3 = Temporal.PlainDate.from(date1); // Copy// 1. Schedule meeting across timezones
const meeting = Temporal.ZonedDateTime.from({
year: 2024,
month: 12,
day: 20,
hour: 10,
minute: 0,
timeZone: 'America/Los_Angeles'
});
console.log('LA:', meeting.toString());
console.log('NY:', meeting.withTimeZone('America/New_York').toString());
console.log('Tokyo:', meeting.withTimeZone('Asia/Tokyo').toString());
// 2. Days until event
const today = Temporal.Now.plainDateISO();
const christmas = Temporal.PlainDate.from('2024-12-25');
const daysUntil = today.until(christmas, { largestUnit: 'day' });
console.log(`Days until Christmas: ${daysUntil.days}`);
// 3. Age calculation
function getAge(birthDate) {
const today = Temporal.Now.plainDateISO();
const age = birthDate.until(today, { largestUnit: 'year' });
return age.years;
}
const birthDate = Temporal.PlainDate.from('1990-05-15');
console.log(`Age: ${getAge(birthDate)}`);
// 4. Business days (Mon-Fri)
function addBusinessDays(date, days) {
let result = date;
let remaining = days;
while (remaining > 0) {
result = result.add({ days: 1 });
// dayOfWeek: 1=Mon, 7=Sun
if (result.dayOfWeek <= 5) {
remaining--;
}
}
return result;
}
const startDate = Temporal.PlainDate.from('2024-12-13'); // Friday
const deadline = addBusinessDays(startDate, 3);
console.log(deadline.toString()); // Tuesday (skip weekend)
// 5. Start/end of day
const date = Temporal.PlainDate.from('2024-12-14');
const startOfDay = date.toPlainDateTime({ hour: 0 });
const endOfDay = date.toPlainDateTime({ hour: 23, minute: 59, second: 59 });Date only (2024-12-14)
Time only (15:30:45)
Date + time, no timezone
Date + time + timezone
Time span (P2DT5H30M)
Exact moment in time (UTC)
Stage 3 proposal, expected in 2025+
All operations return new instances (safer)
Built-in timezone support with ZonedDateTime
@js-temporal/polyfill available now