December 11, 2021

How to Get Number of Days in Month in Javascript

By Krishnaa JavaScript Questions 0 Comments

In this tutorial, you will learn how to get number of days in month in javascript. As you already know, there are in total 12 months and 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 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 enter a random year and month in the input fields. Upon click of a button, we will display the number of days in that month. Please have a look over the code example and the steps given below.

HTML & CSS

We have 4 elements in the HTML file (div, input, 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">    
    <input type="number" id="month" placeholder="Enter Month">
    <input type="number" id="year" placeholder="Enter Year">
    <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;
}

input {
  display: block;  
  margin: 10px auto;
  padding: 10px 20px;
}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

Javascript

We have selected the input element, button element, and h1 element using the document.querySelector() method and stored them in monthInput, yearInput, btnGet, and output variables respectively.
We have attached a click event listener to the button element.
In the event handler function, we are getting values from both the input fields using value property, converting them into number type using the Number() method, and storing them in the month and year variables.

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 monthInput = document.querySelector("#month");
let yearInput = document.querySelector("#year");
let btnGet = document.querySelector("button");
let output = document.querySelector("h1");

btnGet.addEventListener("click", () => {  
  let month = Number(monthInput.value);
  let year = Number(yearInput.value);
  let result = getNumberOfDays(year, month)
  output.innerText = result;
});


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

You May Also Like: