In this article, we are going to learn about how to get last week’s Date by using JavaScriptthe. JavaScript’s dynamic nature improves websites by adding dynamic elements. Fetching the previous week’s date is vital for event schedules, calendars, and timely data display.
There are several methods that can be used to get the last week’s Date using JavaScript, which is listed below:
- Leveraging the Date Objects
- Using setUTCDate Method
We will explore all the above methods along with their basic implementation with the help of examples.
Approach 1: Using the Date Objects
The JavaScript Date object offers a variety of methods that simplify date operations. To retrieve the date from the previous week, one can subtract 7 days’ worth of milliseconds from the current date and elegantly display it on the screen.
Syntax:
const lastWeekDate = new Date(currentDate.getTime() - 7 * 24 * 60 * 60 * 1000);
Example: The provided HTML code is responsible for creating a web page that prominently showcases the text “Geeksforneveropen” as its main heading. To ensure an organized layout with centered content, CSS styling techniques are employed, complemented by a background color. A visually appealing box is also included to highlight the “Last Week’s Date,” which is dynamically calculated and displayed using JavaScript within this designated space.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Last Week's Date</title> <style> body { font-family: Arial, sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; margin: 0; background-color: #f0f0f0; } #dateContainer { background-color: #ffffff; border-radius: 8px; padding: 16px; box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1); width: 300px; height: 150px; text-align: center; } .heading { color: green; font-size: 26px; border-bottom: 3px solid green; border-radius: 15px; padding: 10px; text-align: center; } .subheading { font-size: 20px; } </style> </head> <body> <div id="dateContainer"> <h1 class="heading"> Geeksforneveropen </h1> <h2 class="subheading"> Last Week's Date: </h2> <p id="lastWeekDate"></p> </div> <script> // Get last week's date using Date object const currentDate = new Date(); const lastWeekDate = new Date(currentDate.getTime() - 7 * 24 * 60 * 60 * 1000); // Display last week's date on the screen const lastWeekDateElement = document.getElementById("lastWeekDate"); lastWeekDateElement.textContent = lastWeekDate.toDateString(); </script> </body> </html> |
Output:
Approach 2: Using setUTCDate Method
In this approach, we will use the `setUTCDate` method, this approach calculates the date of the previous week by subtracting 7 days directly from the current date. Subsequently, it formats the result as “YYYY-MM-DD“. The JavaScript `Date` object is effectively employed to manipulate dates and provides an alternative means of obtaining last week’s date.
Syntax:
currentDate.setUTCDate(currentDate.getUTCDate() - 7);
Example: This HTML code is used to create a webpage with the title “Last Week’s Date.” By utilizing CSS, the layout is structured neatly with centered content and a green-themed design. The web page showcases the title “Geeksforgeeks,” followed by “Last Week’s Date:” along with the date from one week ago. All of this is presented within a container that features subtle shadow effects.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title>Last Week's Date</title> <style> body { font-family: Arial, sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; margin: 0; background-color: #f0f0f0; } #dateContainer { background-color: #ffffff; border-radius: 8px; padding: 16px; box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1); width: 300px; height: 150px; text-align: center; } .heading { color: green; font-size: 26px; border-bottom: 3px solid green; border-radius: 15px; padding: 10px; text-align: center; } .subheading { font-size: 20px; } </style> </head> <body> <div id="dateContainer"> <h1 class="heading"> Geeksforneveropen </h1> <h2 class="subheading"> Last Week's Date: </h2> <p id="lastWeekDate"></p> </div> <script> // Get last week's date using JavaScript const currentDate = new Date(); currentDate.setUTCDate(currentDate.getUTCDate() - 7); // Format the date as "YYYY-MM-DD" const formattedDate = `${currentDate.getUTCFullYear()} - ${(currentDate.getUTCMonth() + 1) .toString().padStart(2, '0') } - ${currentDate.getUTCDate() .toString().padStart(2, '0')}`; // Display last week's date on the screen const lastWeekDateElement = document.getElementById("lastWeekDate"); lastWeekDateElement.textContent = formattedDate; </script> </body> </html> |
Output:
Get last week’s Date using JavaScript Example 2
