Using JavaScript to Get the Current Month

One of the easiest ways we have found to use JavaScript to get the current month is to make use of the JavaScript toLocaleString() method. We can simply change a couple parameters of the method to easily get the month in any format we want.

The toLocaleString() method has the following options for the month parameter: “2-digit”, “long”, “narrow”, “numeric”, “short”. Let’s show how each displays the month below.

var currDate = new Date();
var month1 = currDate.toLocaleDateString('en-US', { month: '2-digit'});
var month2 = currDate.toLocaleDateString('en-US', { month: 'long'});
var month3 = currDate.toLocaleDateString('en-US', { month: 'narrow'});
var month4 = currDate.toLocaleDateString('en-US', { month: 'numeric'});
var month5 = currDate.toLocaleDateString('en-US', { month: 'short'});

console.log(month1);
console.log(month2);
console.log(month3);
console.log(month4);
console.log(month5);

#Output
08
August
A
8
Aug

Another way we can also get the current month of the year is by using the getMonth() method. It will return a number from 0 to 11, with 0 corresponding to January, and 11 to December.

var currDate = new Date();
var currMonth = currDate.getMonth();

The value of currMonth in the code above would return whatever month of the year it currently is. The day this post was written was January 16th, so 0 would be the value of currMonth.

Displaying getMonth as a String Instead of Number

We can convert the month number we get from getMonth into the month as a String. To do this we just need to make an array with all the months as seen below.

function genMonth(){
  var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
}

We can then use the getMonth() value to find the correct month in the array.

function genMonth(){
  var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
  var currDate = new Date();
  var currMonth = currDate.getMonth();
  var monthName = months[currMonth];
}

The value of monthName in the code above would return whatever month of the year it currently is, which in this case would be January.

Getting and Displaying the Month in JavaScript with a Click

Below we will provide code to get the current month in JavaScript, and let the user see it in a friendly format when they click a button.

<div id="div1">
  <div id="click-me" onclick="genMonth()">Get Month</div>
  <p>Today's Month is: <span id="theDate"></span></p>
</div>

We will simply get the Date with the Date() method, and use the toLocaleString() method and some parameter options to display the month nicely. Here is the simple JavaScript code:

function genMonth(){
  var currDate = new Date();
  var month = currDate.toLocaleDateString('en-US', { month: 'long'});
  document.getElementById("theDate").innerHTML = month;
}

The final code and output for this example is below:

Code Output:

Full Code:

<div id="div1">
  <div id="click-me" onclick="genMonth()">Get Month</div>
  <p>Today's Month is: <span id="theDate"></span></p>
</div>

<script>

function genMonth(){
  var currDate = new Date();
  var month = currDate.toLocaleDateString('en-US', { month: 'long'});
  document.getElementById("theDate").innerHTML = month;
}

</script>

Hopefully this article has been useful in showing how to use JavaScript to get the current month.