Local getters
Read components in the device local time zone.
Platform under construction
Date Get & Set
Date get and set methods read or change components. The important trap: setters mutate the existing Date object.
const date = new Date("2026-01-15T09:30:00Z");
date.getUTCFullYear();
date.getUTCMonth(); // 0 for January
date.setUTCDate(20);
Dates, Time & Intl
Getters read components; setters mutate the object.
Date has local getters such as getFullYear, getMonth and getDate. It also has UTC getters such as getUTCFullYear, getUTCMonth and getUTCDate.
Months are zero-based in Date getters and setters. January is 0, February is 1 and December is 11. Day of month uses normal one-based numbering.
Setters modify the existing Date object. If you need a changed copy, create a new Date first and then set the copy.
UTC getters
Read components in UTC.
Zero-based months
getMonth returns 0-11, not 1-12.
Setters mutate
setDate, setMonth and setFullYear change the Date object.
Examples
Make the date-time concept visible in the code.
Copy before mutation
const original = new Date("2026-01-15T09:30:00Z");
const changed = new Date(original.getTime());
changed.setUTCDate(20);
Mutating shared Date state
const original = new Date("2026-01-15T09:30:00Z");
original.setUTCDate(20);
// Code that still needs January 15 has now lost it.
Code patterns
Reusable examples for quick reference.
Dates and time zones become much easier when every example names the concept it represents: instant, local display, UTC output, calendar date, formatted text or zoned time.
Read UTC parts
Use UTC methods when the date should not depend on the device zone.
const date = new Date("2026-01-15T09:30:00Z");
console.log(date.getUTCFullYear());
console.log(date.getUTCMonth() + 1);
console.log(date.getUTCDate());
Read local parts
Use local methods only when local display logic is intended.
const date = new Date("2026-01-15T09:30:00Z");
console.log(date.getFullYear());
console.log(date.getMonth() + 1);
console.log(date.getDate());
Copy before setting
Avoid mutating a Date that other code still needs.
const original = new Date("2026-01-15T09:30:00Z");
const copy = new Date(original.getTime());
copy.setUTCDate(20);
console.log(original.toISOString());
console.log(copy.toISOString());
Add days carefully
Use a copy and setDate for simple calendar-day movement.
const start = new Date("2026-01-15T09:30:00Z");
const next = new Date(start.getTime());
next.setUTCDate(next.getUTCDate() + 7);
console.log(next.toISOString());
Rules that matter
Separate storage, logic and display.
Date-time bugs usually start when storage format, calculation logic and user-facing display are treated as the same thing. Keep those responsibilities separate and the code becomes much easier to trust.
Choose local or UTC deliberately
Do not mix getDate and getUTCDate casually.
Add 1 to getMonth for display
Date months are zero-based.
Copy before setting
Setters mutate the Date object.
Watch month overflow
Setting dates can roll into another month.
Prefer Intl for display
Getters are for logic, not polished human formatting.
Use Temporal or a library for complex calendar logic
Date setters can become fragile for advanced cases.
Production thinking
Time is a data-modeling problem before it is a formatting problem.
Why does this matter?
Date getters and setters are low-level. They work, but the local/UTC split and mutation behavior create many subtle bugs.
Accessibility
Calendar values should be displayed clearly after calculation. Do not expose zero-based month values to users.
Production note
Production code should isolate Date mutation and avoid sharing mutable Date objects between unrelated logic.
SEO note
Generated date values should not accidentally shift month or day because of local/UTC confusion.
Live code lab
Change the HTML, CSS or JavaScript and run the result.
The preview runs inside an isolated iframe. The JavaScript is placed inside the HTML editor for now, so every example stays together and remains easy to understand.
Mini assignment
Try this now.
- Remove the copy and mutate start directly. Watch both lines change.
- Change getUTCMonth() + 1 to getUTCMonth() and see the zero-based value.
- Try adding 40 days and observe month overflow.
Practice assignment
Do this before moving to the next topic.
- Read the UTC year from a Date.
- Read the month and convert it to a display month.
- Copy a Date before using a setter.
Try it yourself
Copy a Date and add days
Self-check
Before you continue, prove that you understand Date Get & Set.
Dates are full of traps. Explain the concept first, then run the code and check whether the output matches your mental model.
- Can you explain the difference between local and UTC getters?
- Can you explain why getMonth returns 0 for January?
- Can you explain why setters can be dangerous?
- Can you explain how to copy a Date?
- Can you explain why Intl is better for display?