July 1, 2020

How to Find Yesterday’s Date in Javascript

By Krishnaa JavaScript Questions 0 Comments

In this tutorial, you will learn how to find yesterday’s date in javascript. The simplest way to find yesterday’s date is by using the Date constructor. After initialization, the Date constructor returns the Date object and there is no direct method available in the Date object to grab yesterday’s date but with some minor calculation, we can get that.

In the following example, we have one button and one h1 element. Upon click of button, we simply want to get yesterday’s date and display it inside the h1 element. Please have a look over the code example and steps given below.

HTML & CSS

We have 3 elements in the HTML file (div, button, and h1). The div element is just a wrapper for the rest of the elements.
The inner text for the button element is “Get” and for the h1 element is “Result”.
We have done some basic styling using CSS and added the link to our style.css stylesheet inside the head element.

We have also included our javascript file script.js with a script tag at the bottom.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    
    <div>
        <button>Get</button>
        <h1>Result</h1>
    </div>
    
    <script src="script.js"></script>
</body>
</html>

body {
    text-align: center;
}

div {
    display: inline-block;
}

button {
    display: inline-block;
    padding: 10px 20px;
}

Javascript

We have selected button and h1 elements using the document.querySelector() method and stored them in btnGet and result variables respectively.

We have attached the click event listener to the button element.
Inside the click event handler function, we are getting an instance of Date using Date constructor and storing it in the dateObj variable.
The Date instance have getDate() and setDate() methods. getDate() method returns current date and setDate() method set the date.

We are storing the current date in the current variable.
We are subtracting 1 from it and passing it to the setDate() method to set the date to yesterday’s date.
We are getting month, year, and date by calling getMonth(), getFullYear(), and getDate() methods respectively of Date instance. getMonth() method returns an integer between 0 and 11, where January is 0, February is 1, and so on. That’s why we are adding 1 to a month to get the correct digit for the month.

We are simply creating a template string with month, year, and date variables and displaying it inside the h1 element.

let btnGet = document.querySelector('button');
let result = document.querySelector('h1');

btnGet.addEventListener('click', () => {
    let dateObj = new Date();

    let current = dateObj.getDate();

    dateObj.setDate(current-1);

    let month = dateObj.getMonth() + 1;
    let date = dateObj.getDate() ;
    let year = dateObj.getFullYear();

    result.innerText = `${month}/${date}/${year}`;
});

You May Also Like: