Add Days To Date JavaScript
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Amruta
In this tutorial we will show you the solution of add days to date JavaScript, here we needs to use setDate() method in javascript for add days with current date.
The setDate() method changes the day of the month of a given Date instance, based on local time.
To instead change the day of the month for a given date instance based on UTC time, use the setUTCDate() method. So here we used to added 7 days with current date.
Step By Step Guide On Add Days To Date JavaScript :-
Here we defined two div element with id’s ‘res1,res2’ for append results on webpage. In script we defined date object then stored on variable ‘date’ with keyword ‘const’.
It will returns current date then we appended that on webpage using ‘res1’ div element after that using setDate() method we adding integer value ‘7’ with current date variable ‘date’ by getDate() method.
Finally we appended 7 days added date on webpage using ‘res2’ div element and also console panel.
<!DOCTYPE html>
<html>
<head>
<title>ADD DAYS TO DATE</title>
</head>
<body>
<div id="res1">Current Date: </div>
<div id="res2">Added 7 days to Date: </div>
<script>
const date=new Date();
document.getElementById("res1").innerHTML+=date;
date.setDate(date.getDate()+7);
document.getElementById("res2").innerHTML+=date;
console.log(date);
</script>
</body>
</html>- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is contain information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
- Here we defined two div elements with id’s ‘res1,res2’ for appends result on webpage by innerHTML.
- In script variable ‘date’ defined for store retrieved current date by using date object then we appended ‘date’ on webpage by using ‘res1’ id attribute defined in div element with string ‘Current Date:’ that’s way we added ‘+’ plus symbol at end of ‘innerHTML’ property.
- By appending ‘setDate()’ method with variable ‘date’ we can add any number of days as per our wish. Within that the getDate() method will helps us to set correct date format.
- Then we appended updated ‘date’ on webpage by using ‘res2’ id attribute defined in div element with string ‘Added 7 days to Date:’ that’s way we added ‘+’ plus symbol at end of ‘innerHTML’ property and also we added end result on console.
- Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
In conclusion now we are able to know how to add days to date using JavaScript.
When we executes program on browser we can see the result messages of ‘Current Date: Sat Aug 20 2022 11:04:05 GMT+0530 (India Standard Time), Added 7 days to Date: Sat Aug 27 2022 11:04:05 GMT+0530 (India Standard Time)’ on webpage.
For seeing result printed on console panel use shortcut ‘ctrl+shift+j’ will open console panel at right hand side of browser.
I hope this tutorial on add days to date JavaScript helps you and the steps and method mentioned above are easy to follow and implement.
About Amruta
