Open Playground
JS TutorialLesson #197

JavaScript Temporal vs Date

Learn the differences between JavaScript Date and Temporal

Learn the differences between JavaScript Date and Temporal

  • Date months are 0-based, Temporal months are 1-based
  • Date arithmetic is manual, Temporal is built-in
  • Date mutates values, Temporal does not
  • Date mixes UTC and time zones, Temporal separates them
  • Date can fail in DST handling, Temporal can not

Learn why Temporal is the modern alternative to Date.

Share

JavaScript Date Problems

The JavaScript Date object is old and has several design problems.

These are the most common mistakes developers make when using Date objects:

  • Using the wrong month number because months start at 0.
  • Accidentally changing a date object by calling a mutating method.
  • Parsing unclear strings that behave differently across environments.
  • Mixing local time and UTC values in the same program.
  • Doing math across DST changes and getting unexpected hours.

The JavaScript Date object has been used since 1995. > Temporal is the modern replacement designed to fix many of Date's problems.

Date Months are 0-Based

In the JavaScript Date object, January is month 0 and December is month 11.

Date Example

Example Code

javascript
Try it Yourself
// May 17, 2026:

let date = new Date(2026, 4, 17)
The Date object is confusing because most people expect January to be month 1.

Temporal Months are 1-Based

In the JavaScript Temporal object, January is month 1 and December is month 12.

This is much more user-friendly.

Temporal Example

Example Code

javascript
Try it Yourself
// May 17, 2026:

const date = new Temporal.PlainDate(2026, 5, 17)

Date Objects are Mutable

JavaScript Date objects can change.

Date objects are mutable.

Date Example

Example Code

javascript
Try it Yourself
// Create a Date

const date = new Date("2026-05-17");

// Add 7 days to date

date.setDate(date.getDate() + 7);

// Here the original date is lost

Date Example

Example Code

javascript
Try it Yourself
// Create a Date

const date1 = new Date("2026-05-17");

// Create a copy

const date2 = date1;

// Add 7 days to date1

date1.setDate(date1.getDate() + 7);

// Here date2 has changed
In the example above, the variables date1 and date2 point to the same object. > Because of thes, date2 changes when date1 changes. > This can create unexpected results when date values are copied or reused.

Temporal Objects are Immutable

JavaScript Temporal objects cannot change.

Temporal objects are immutable.

Temporal Example

Example Code

javascript
Try it Yourself
// Create a Date

const date1 = Temporal.PlainDate.from("2026-05-17");

// Add 7 days

const date2 = date1.add({ days: 7 });

// Here original date1 is kept

Date Parsing is Inconsistent

JavaScript has been a minefield of different formats, browser quirks and locale surprises.

Date strings can be parsed differently across browsers and environments, and different formats may be interpreted as local time or UTC.

A date string like 2026-05-07 is interpreted as UTC time in JavaScript.

A date-time string like 2026-05-07T14:40:00 is interpreted as local time.

Date Example

Example Code

javascript
Try it Yourself
const d1 = new Date("2026-05-17");

const d2 = new Date("2026-05-17T00:00:00");

const d3 = new Date("05/17/2026");

const d4 = new Date("May 17 2026");

const d5 = new Date("17 May 2026");

const d6 = new Date(2026, 4, 17);

Temporal PlainDate

Temporal avoids the problems above by defining strict parsing rules for ISO strings.

Temporal.PlainDate is not a timestamp.

It is just 2026-05-17 with no time and no time zone.

Temporal Example

Example Code

javascript
Try it Yourself
// Create a PlainDate object

const date = Temporal.PlainDate.from("2026-05-17");
It is safer to avoid unclear formats and use explicit formats when possible.

Date and Time Zone

new Date(2026, 4, 1) creates a timestamp of your local time at midnight.

This means a day can "shift" when you format it to UTC.

Date Example

Example Code

javascript
Try it Yourself
// Create a Date object

const date = new Date(2026, 4, 1);

// Might be another day in some time zones:

date.toISOString();

Date Mixes Local Time and UTC

A Date object always stores a timestamp, but it can display values as local time or UTC.

This mix can easily cause confusion when converting and comparing dates.

The same moment can look different depending on how it is displayed.

Date Example

Example Code

javascript
Try it Yourself
const date = new Date();

let time1 = date.toString();

let time2 = date.toUTCString();

Temporal Separates Time and UTC

Temporal uses clear types for time zones.

Temporal.ZonedDateTime always includes a time zone.

Temporal Example

Example Code

javascript
Try it Yourself
const instant = Temporal.Now.instant();

const local = Temporal.Now.zonedDateTimeISO();

DST Can Break Date Math

Daylight saving time (DST) can cause a day to be 23 or 25 hours long.

This can break calculations that assume every day is exactly 24 hours.

Example

Example Code

javascript
Try it Yourself
const start = new Date("2026-03-29T00:00:00");

const end = new Date(start.getTime() + 24 * 60 * 60 * 1000);

The result can be off by one hour in time zones with DST changes.


Date Math

Date math often requires manual calculations.

Date Example

Example Code

javascript
Try it Yourself
const start = new Date("2026-05-01");

const end = new Date("2026-05-17");

const diff = end - start;

Temporal has built-in date arithmetic.

Temporal Example

Example Code

javascript
Try it Yourself
const start = Temporal.PlainDate.from("2026-05-01");

const end = Temporal.PlainDate.from("2026-05-17");

const diff = start.until(end);
Nanosecond Precision > The Date object uses milliseconds precision. > Temporal offers 1 million times higher nanosecond precision.

Date Mixes Everything

Date mixes everything in one object.

Date (Problem)

Example Code

javascript
Try it Yourself
const date = new Date(); // date + time + zone

Temporal Uses Clear Types

Temporal objects separate different use cases into different objects.

This makes code easier to read and less error-prone.

ObjectDescription
Temporal.DurationObject for duration (days, hours, minutes)
Temporal.InstantObject for exact moment in UTC time
Temporal.PlainDateTimeObject for Date and Time only (no time zone)
Temporal.PlainDateObject for Date only (year, month, day)
Temporal.PlainTimeObject for Time only
Temporal.PlainYearMonthObject for Year and Month only
Temporal.PlainMonthDayObject for Month and Day only
Temporal.ZonedDateTimeObject for Date and Time with time zone
Temporal.NowContainer for temporal methods

Differences Between Date and Temporal

FeatureDateTemporal
ISO 8601 Date/TimeYesYes
RFC 3339 Date/TimeYesYes
RFC 9557 Date/TimeNoYes
Time zone supportLimitedBuilt-in
ImmutableNoYes
Date-Only TypeNoYes
Time-Only TypeNoYes
1-Based MonthsNoYes
DST safe arithmeticNoYes
ISO 8601 DurationNoYes
RFC 9557 iCalendarNoYes
Modern API designNoYes
PrecisionMillisecondsNanoseconds
You may still use JavaScript Date for simple tasks such as getting a quick timestamp. > You may also need it if you support older environments without Temporal. > JavaScript Temporal is safer, clearer, and designed for modern applications.

When to Use Temporal?

  • You need correct time zone handling.
  • You work with international users.
  • You want safe date arithmetic.
  • You want clear and modern code.

Interactive Code Examples

Date Example

javascript
Try it Yourself
JavaScript syntax and algorithm demonstration.
// May 17, 2026:

let date = new Date(2026, 4, 17)

Temporal Example

javascript
Try it Yourself
JavaScript syntax and algorithm demonstration.
// May 17, 2026:

const date = new Temporal.PlainDate(2026, 5, 17)

Date Example

javascript
Try it Yourself
JavaScript syntax and algorithm demonstration.
// Create a Date

const date = new Date("2026-05-17");



// Add 7 days to date

date.setDate(date.getDate() + 7);



// Here the original date is lost

Date Example

javascript
Try it Yourself
JavaScript syntax and algorithm demonstration.
// Create a Date

const date1 = new Date("2026-05-17");

// Create a copy

const date2 = date1;



// Add 7 days to date1

date1.setDate(date1.getDate() + 7);



// Here date2 has changed

Temporal Example

javascript
Try it Yourself
JavaScript syntax and algorithm demonstration.
// Create a Date

const date1 = Temporal.PlainDate.from("2026-05-17");



// Add 7 days

const date2 = date1.add({ days: 7 });



// Here original date1 is kept

Date Example

javascript
Try it Yourself
JavaScript syntax and algorithm demonstration.
const d1 = new Date("2026-05-17");

const d2 = new Date("2026-05-17T00:00:00");

const d3 = new Date("05/17/2026");

const d4 = new Date("May 17 2026");

const d5 = new Date("17 May 2026");

const d6 = new Date(2026, 4, 17);