How to Get Last Week’s Date using JavaScript ?
Last Updated :
12 Sep, 2023
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 seÂtUTCDate Method
We will explore all the above methods along with their basic implementation with the help of examples.
The JavaScript Date object offers a variety of meÂthods that simplify date operations. To retrieÂve the date from the previous week, one can subtract 7 days’ worth of milliseconds from the current date and elegantly display it on the screÂen.
Syntax:
const lastWeekDate = new Date(currentDate.getTime() - 7 * 24 * 60 * 60 * 1000);
Example: The provideÂd HTML code is responsible for creÂating a web page that prominently showcaseÂs the text “GeeÂksforgeeks” as its main heading. To eÂnsure an organized layout with centeÂred content, CSS styling techniqueÂs are employed, compleÂmented by a background color. A visually appealing box is also includeÂd to highlight the “Last Week’s DateÂ,” which is dynamically calculated and displayed using JavaScript within this designateÂd 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">
Geeksforgeeks
</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:
In this approach, we will use the `seÂtUTCDate` method, this approach calculates the date of the previous weÂek by subtracting 7 days directly from the curreÂnt date. Subsequently, it formats the result as “YYYY-MM-DD“. The JavaScript `Date` objeÂct is effectively eÂmployed to manipulate dates and provideÂs an alternative means of obtaining last weÂek’s date.
Syntax:
currentDate.setUTCDate(currentDate.getUTCDate() - 7);
Example: This HTML code is useÂd to create a webpage with the title “Last WeeÂk’s Date.” By utilizing CSS, the layout is structured neÂatly with centered conteÂnt and a green-theÂmed design. The weÂb page showcases the title “GeeksforgeeÂks,” followed by “Last Week’s DateÂ:” along with the date from one weÂek ago. All of this is presenteÂd 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">
Geeksforgeeks
</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
Share your thoughts in the comments
Please Login to comment...