How To Get Yesterday Date In Jquery

In this blog post, we will learn how to get yesterday’s date using jQuery. jQuery, a popular JavaScript library, makes it easy to work with HTML documents, handle events, create animations, perform AJAX calls and much more. However, when it comes to manipulating dates, JavaScript’s built-in Date object is the way to go.

Getting Yesterday’s Date using the Date Object

Although jQuery itself does not have any built-in functionality to get yesterday’s date, we can leverage JavaScript’s Date object to achieve this. Here’s how you can get yesterday’s date using the Date object in JavaScript:

    var today = new Date();
    var yesterday = new Date(today);
    yesterday.setDate(yesterday.getDate() - 1);
    

In the code snippet above, we first create a new Date object called today. Then, we create another Date object called yesterday and initialize it with the value of today. Finally, we use the setDate() method to subtract one day from the yesterday object, which gives us yesterday’s date.

Formatting the Date

Now that we have yesterday’s date, we might want to format it for display purposes. JavaScript’s Date object provides several methods to get the day, month, and year individually, like getFullYear(), getMonth(), and getDate(). Here’s an example of how to format the date as a string in the format “YYYY-MM-DD”:

    function formatDate(date) {
        var year = date.getFullYear();
        var month = date.getMonth() + 1; // getMonth() returns 0-11, we need 1-12
        var day = date.getDate();

        // Add leading zeros if necessary
        month = (month < 10) ? '0' + month : month;
        day = (day < 10) ? '0' + day : day;

        return year + '-' + month + '-' + day;
    }

    var formattedDate = formatDate(yesterday);
    

In the code snippet above, we create a function called formatDate() which takes a Date object as an argument. The function extracts the year, month, and day from the date and converts them into strings with leading zeros if necessary. It then concatenates the strings and returns the formatted date.

Displaying the Date using jQuery

Finally, let’s use jQuery to display the formatted date in an HTML element with the ID yesterday-date:

    $('#yesterday-date').text(formattedDate);
    

The code snippet above uses jQuery’s text() method to set the inner text of the HTML element with the specified ID. So, the complete HTML and JavaScript code would look like this:

<!-- HTML -->
<div id="yesterday-date"></div>

<!-- JavaScript -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    var today = new Date();
    var yesterday = new Date(today);
    yesterday.setDate(yesterday.getDate() - 1);

    function formatDate(date) {
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var day = date.getDate();

        month = (month < 10) ? '0' + month : month;
        day = (day < 10) ? '0' + day : day;

        return year + '-' + month + '-' + day;
    }

    var formattedDate = formatDate(yesterday);
    $('#yesterday-date').text(formattedDate);
</script>
    

And that’s it! You now know how to get yesterday’s date using JavaScript’s Date object and display it using jQuery. This technique can be easily adapted to manipulate and display dates in various ways, such as calculating the difference between dates, displaying a user-friendly date format, and more.