Add days to a Date in vanilla JavaScript
Despite the JavaScript Date
warts, it’s straightforward to add day(s) to a date in JavaScript.
While it would be very easy to reach for moment.js or another date manipulation library (date-fns, luxon, dayjs) to do something as simple as adding days to a Date in JavaScript, writing a short helper function might just be easier.
Table of Contents
Add days to a new instance of JavaScript Date
function addDays(date, days) {
const copy = new Date(Number(date))
copy.setDate(date.getDate() + days)
return copy
}
const date = new Date();
const newDate = addDays(date, 10);
Update a JavaScript Date with added days
const date = new Date();
date.setDate(date.getDate() + 10);
Add a day to a JavaScript Date
const date = new Date();
date.setDate(date.getDate() + 1);
Add a week to a JavaScript Date
const date = new Date();
date.setDate(date.getDate() + 7);
Gotchas and examples: months in JavaScript dates roll over
This actually works as expected, eg. the month rolls over.
const d = new Date('2019-04-14');
const monthRollsOver = addDays(myDate, 31);
console.log(monthsRollOver)
// 2019-05-15
Find the live examples at: observablehq.com/@hugodf/add-days-to-a-javascript-date
Of course if you’re already using a date manipulation library elsewhere in your code, you should leverage that since you’re already paying the download/parse cost.
Interested in Alpine.js?
Power up your debugging with the Alpine.js Devtools Extension for Chrome and Firefox. Trusted by over 15,000 developers (rated 4.5 ⭐️).
orJoin 1000s of developers learning about Enterprise-grade Node.js & JavaScript