December 11, 2021

How to Get Number of Days in Current Month in Javascript

By Krishnaa JavaScript Questions 0 Comments

In this tutorial, you will learn how to get number of days in current month in javascript. As you already know, the number of days in every month varies between 30 and 31 except February where it will vary between 28 and 29.

There are numerous ways to get the number of days in a current month. Most of them involve the usage of third-party libraries such as Moment JS or Day JS. But to keep things simple, we can make use of the Date object. This object contains various methods and properties which will be very helpful in determining the number of days in any month.

In the following example, we will display the number of days in the current month upon click of a button. Please have a look over the code example and the 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 innerText for the button element is “Get” and for the h1 element, it 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 class="container">    
    <button>Get</button>
    <h1>Result</h1>
  </div>

  <script src="script.js"></script>
</body>

</html>

.container {        
    text-align: center;
}

button {
  margin-top: 10px;
  padding: 10px 20px;
}

Javascript

We have selected the button element and h1 element using the document.querySelector() method and stored them in btnGet and output variables respectively.
We have attached a click event listener to the button element.
In the event handler function, we are using the Date object to get the current date and storing it in the currentDate variable.
We are calling getFullYear() and getMonth() methods of the Date object to get the year and month and storing them in the year and month variables respectively. We are adding 1 to the month because it ranges from 0 to 11 where 0 is for January and 11 is for December.
We are calling the getNumberOfDays() method and passing it year and month as parameters. It will basically return the last date in the month which also represents the number of days in that month. We are storing the returned value in the result variable
We are displaying the result in the h1 element using the innerText property.

let btnGet = document.querySelector("button");
let output = document.querySelector("h1");

btnGet.addEventListener("click", () => {
  let currentDate = new Date();
  let year = currentDate.getFullYear();
  let month = currentDate.getMonth() + 1;  
  let result = getNumberOfDays(year, month)
  output.innerText = result;
});


function getNumberOfDays(year, month) { 
  return new Date(year, month, 0).getDate();
}

You May Also Like: