← Back to JavaScript Course | Chapter 4: Modern JS, Async & DOM | Lesson 25 of 26

JS Date Set

Reading a Date object's parts is only half the picture -- setFullYear(), setMonth(), setDate(), and their relatives let you modify an existing Date in place, changing just one part (like the year) while leaving the rest untouched, or even computing a date relative to another one.

Setting the Year, Month, and Day

setFullYear(year), setMonth(month), and setDate(day) each modify one specific part of an existing Date object -- with setMonth() using the same zero-indexed convention (0 for January) as its getMonth() counterpart, a detail easy to trip over.

Note: Double-check setMonth() calls against the zero-indexed convention -- setMonth(0) sets January, not "month 0 which doesn't exist".

Warning: setDate() with a value beyond the month's actual length rolls over into the following month rather than raising an error, which can silently produce an unexpected date.

Example: Setting the Year, Month, and Day

javascript
const date = new Date(2024, 0, 1);
date.setFullYear(2025);
date.setMonth(5); // 0-indexed, 5 = June
date.setDate(15);
console.log(date.toDateString());

Setting Time Components

setHours(), setMinutes(), setSeconds(), and setMilliseconds() modify a Date's time-of-day portion, exactly the way the year/month/day setters modify its calendar portion -- useful for adjusting just the time while keeping the same calendar date.

Note: Use setHours() (and its relatives) to adjust just the time-of-day on a Date, without needing to reconstruct the entire object from scratch.

Warning: setHours() accepts optional additional arguments for minutes, seconds, and milliseconds all at once -- calling it with just one argument leaves the other time components unchanged, which may or may not be what you intend.

Example: Setting Time Components

javascript
const date = new Date();
date.setHours(10);
date.setMinutes(30);
date.setSeconds(0);
console.log(date.toTimeString());

Computing Relative Dates

A clever pattern combines a getter and setter of the same unit: date.setDate(date.getDate() + 7) computes 'one week from now' by reading the current day and adding 7, letting JavaScript's Date object handle any month or year rollover automatically.

Note: Let JavaScript's Date arithmetic handle month/year boundaries automatically by using this get-then-set pattern, rather than manually calculating "is this the last day of the month" yourself.

Warning: setDate() automatically rolls over into the next month (or even year) when the resulting day exceeds the current month's length -- this is the whole point of the pattern, not a bug.

Example: Computing Relative Dates

javascript
const date = new Date(2024, 0, 28);
date.setDate(date.getDate() + 7); // one week from now, handles rollover
console.log(date.toDateString());

Setting a Date to the Start or End of a Period

Combining setters lets you snap a date to a meaningful boundary -- setting the day to 1 to get the start of the month, or using setMonth(date.getMonth() + 1, 0) to get the last day of the current month, both common needs when building calendar or reporting features.

Note: Use setMonth(month + 1, 0) as a reliable pattern for finding a month's last day, since day 0 of the following month is always the last day of the current one.

Warning: A hardcoded assumption like "the month always has 30 days" breaks for February and any 31-day month -- always use Date-based calculation rather than a fixed guess.

Example: Setting a Date to the Start or End of a Period

javascript
const date = new Date(2024, 5, 15);
date.setDate(1); // start of the month
console.log(date.toDateString());
const lastDay = new Date(2024, 5, 15);
lastDay.setMonth(lastDay.getMonth() + 1, 0); // last day of the month
console.log(lastDay.toDateString());

Set Methods Return a Timestamp, Not a Date

Every set method returns the Date's new numeric timestamp (milliseconds since 1970) as its return value, not a new Date object -- the original Date instance itself is what got modified in place, and that same instance should be used going forward, not the setter's return value.

Note: Continue using the original Date variable after calling a setter, rather than trying to store or reuse the setter's numeric return value as if it were a Date.

Warning: Assigning the return value of a setter (const newDate = date.setFullYear(2030)) to a variable and then treating it like a Date object is a mistake -- it is just a plain number.

Example: Set Methods Return a Timestamp, Not a Date

javascript
const date = new Date(2024, 0, 1);
const result = date.setFullYear(2025); // returns a timestamp, not a Date
console.log(typeof result, result);
console.log(date.toDateString()); // use the original instance
Common Mistakes
  1. Forgetting that JavaScript months are zero-indexed (0 = January, 11 = December) when calling setMonth(), off by one from the calendar month number people naturally think in.
  2. Assuming a "set" method returns a new Date object -- they all mutate the existing Date in place and return only a timestamp number, not a new Date instance.
  3. Setting a day-of-month value beyond the target month's actual length (like setDate(31) on a month with only 30 days), which rolls over into the next month rather than raising an error.
Chapter Summary
  • setFullYear(), setMonth(), setDate(), setHours(), and similar methods each modify one part of an existing Date object in place.
  • Like getMonth(), setMonth() uses zero-indexed months -- 0 for January, 11 for December.
  • Set methods return a timestamp number, not a new Date -- the same Date object is mutated and can continue to be used directly.
Browser Support

All Date set methods have been supported in every browser since JavaScript's earliest versions.

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.