How to Add Days to a Date Object in Javascript (Typescript)

Hello! In this tutorial, you'll learn how to add days to a date object in javascript or Typescript.

How to add days to a Date Object #

There are many ways to add days to a date object in javascript. Below are the possible ways:

Using a modern date manipulation library such as day.js, date-fns, etc. My preference is day.js and that's what we'll be using in this tutorial.
Creating an addDays function using plain javascript

Using a Date Manipulation Library #

If you want to manipulate dates such as adding days or hours to a date object, one of the best practices is to use a date manipulation library such as day.js, date-fs, etc.

In modern web development, it's typical to install it using a package manager like npm or yarn. First, install it in your project like so:

#yarn
yarn add dayjs
#npm
npm install dayjs

If you're using Typescript, you don't have to add types since dayjs is written in Typescript. Now, you can use the library somewhere in your code by importing it:

import dayjs from "dayjs"

const date1 = new Date(2023, 0, 12);
const date2 = "12-01-2023";
const date3 = "2024-11-30T16:00:00.000Z";

const result1 = dayjs(date1).add(3, "days").toDate();
const result2 = dayjs(date2).add(3, "days").toDate();
const result3 = dayjs(date3).add(3, "days").toDate();

console.log(result1); // Sun Jan 15 2023 00:00:00
console.log(result2); // Mon Dec 04 2023 00:00:00
console.log(result3); // Mon Dec 04 2024 00:00:00 12345678910111213

In the above code, we're using dayjs as the library of choice. You can pass any valid date format to the dayjs() function. Then, use its chaining API to manipulate the date. For more information about this, please go to their official documentation.

Creating an `addDays` Function #

In some rare cases, you don't have the luxury of importing a library. Or maybe you don't use date manipulation regularly in your web app which is rare in most cases. The next best thing you can do is to create a reusable function by extending the Date.prototype object using plain javascript.

Date.prototype.addDays = function (days) {
  const date = new Date(this.valueOf());
  date.setDate(date.getDate() + days);
  return date;
};

const date1 = new Date(2023, 0, 12);
const date2 = new Date("12-01-2023");
const date3 = new Date("2024-11-30T16:00:00.000Z");


console.log(date1.addDays(3)) // Sun Jan 15 2023 00:00:00
console.log(date2.addDays(3)) // Sun Jan 15 2023 00:00:00
console.log(date3.addDays(3)) // Sun Jan 15 2023 00:00:001234567891011121314

For Typescript, you have to extend the Date interface in the global scope.

declare global {
  interface Date {
    addDays(days: number): Date;
  }
}

Date.prototype.addDays = function (days) {
  const date = new Date(this.valueOf());
  date.setDate(date.getDate() + days);
  return date;
};
const date1 = new Date(2023, 0, 12);
const date2 = new Date("12-01-2023");
const date3 = new Date("2024-11-30T16:00:00.000Z");


console.log(date1.addDays(3)) // Sun Jan 15 2023 00:00:00
console.log(date2.addDays(3)) // Sun Jan 15 2023 00:00:00
console.log(date3.addDays(3)) // Sun Jan 15 2023 00:00:0012345678910111213141516171819

Conclusion #

You learned how to add days to a date object in javascript. Depending on your situation, you can choose which method suits your needs best.

If you like this tutorial, please leave a like or share this article. For future tutorials like this, please subscribe to our newsletter or follow me on GitHub.

Resources #

Credits: Image by Lars Barstad from Pixabay

ReactHustle

How to Add Days to a Date Object in Javascript (Typescript)