How to get a month in the previous year?

Question

I am trying to get the previous month according to the current month. But the problem arises when the “year” is not 2017.

So, how can I get the month of the previous year ?. The code below describes what I want, if anyone knows how to get it, tell me the method. Thank:)

var month = new Array();
		month[0] = "January";
		month[1] = "February";
		month[2] = "March";
		month[3] = "April";
		month[4] = "May";
		month[5] = "June";
		month[6] = "July";
		month[7] = "August";
		month[8] = "September";
		month[9] = "October";
		month[10] = "November";
		month[11] = "December";

		var cur_month = new Date();
		var cur_month_now = month[cur_month.getMonth()];
		var pre_month_1 = month[cur_month.getMonth()-1];
		var pre_month_2 = month[cur_month.getMonth()-2];
		var pre_month_3 = month[cur_month.getMonth()-3];
		var pre_month_4 = month[cur_month.getMonth()-4];
		var pre_month_5 = month[cur_month.getMonth()-5];

		document.getElementById("cur_month").innerHTML = cur_month_now;
		document.getElementById("pre_month_1").innerHTML = pre_month_1;
		document.getElementById("pre_month_2").innerHTML = pre_month_2;
		document.getElementById("pre_month_3").innerHTML = pre_month_3;
		document.getElementById("pre_month_4").innerHTML = pre_month_4;
		document.getElementById("pre_month_5").innerHTML = pre_month_5;

<div class="dropdown">
	  <button class="btn btn-danger dropdown-toggle" type="button" data-toggle="dropdown">Select Month
	  <span class="caret"></span></button>
	  <ul class="dropdown-menu">
	    <li><a href="#" id="cur_month"></a></li>
	    <li><a href="#" id="pre_month_1"></a></li>
	    <li><a href="#" id="pre_month_2"></a></li>
	    <li><a href="#" id="pre_month_3"></a></li>
	    <li><a href="#" id="pre_month_4"></a></li>
	    <li><a href="#" id="pre_month_5"></a></li>
	  </ul>
	</div>

Run codeHide result

Answer 1

You get this undefined because month[-1]both month[-2]areundefined

You need to actually manipulate the dates in the date object, and not just get the date from the index.

Use this method to get the date of the last month.

function getPrevMonth(date) {
  date.setMonth(date.getMonth() - 1);
  return date;
}

, .

Demo

function getPrevMonth(date) {
  date.setMonth(date.getMonth() - 1);
  return date;
}

var month = new Array();
month[0] = "January";
month[1] = "February";
month[2] = "March";
month[3] = "April";
month[4] = "May";
month[5] = "June";
month[6] = "July";
month[7] = "August";
month[8] = "September";
month[9] = "October";
month[10] = "November";
month[11] = "December";

var cur_month = new Date();
var cur_month_now = month[cur_month.getMonth()];
var pre_month_1 = month[getPrevMonth(cur_month).getMonth()];
var pre_month_2 = month[getPrevMonth(cur_month).getMonth()];
var pre_month_3 = month[getPrevMonth(cur_month).getMonth()];
var pre_month_4 = month[getPrevMonth(cur_month).getMonth()];
var pre_month_5 = month[getPrevMonth(cur_month).getMonth()];

document.getElementById("cur_month").innerHTML = cur_month_now;
document.getElementById("pre_month_1").innerHTML = pre_month_1;
document.getElementById("pre_month_2").innerHTML = pre_month_2;
document.getElementById("pre_month_3").innerHTML = pre_month_3;
document.getElementById("pre_month_4").innerHTML = pre_month_4;
document.getElementById("pre_month_5").innerHTML = pre_month_5;

<div class="dropdown">
  <button class="btn btn-danger dropdown-toggle" type="button" data-toggle="dropdown">Select Month
	  <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li>
      <a href="#" id="cur_month"></a>
    </li>
    <li>
      <a href="#" id="pre_month_1"></a>
    </li>
    <li>
      <a href="#" id="pre_month_2"></a>
    </li>
    <li>
      <a href="#" id="pre_month_3"></a>
    </li>
    <li>
      <a href="#" id="pre_month_4"></a>
    </li>
    <li>
      <a href="#" id="pre_month_5"></a>
    </li>
  </ul>
</div>

Hide result

Answer 2

Date . , , . :

// Array initializers are cleaner and less typing
var month = [
    "January",
    "February",
    "March",
    "April",
    "May",
    "June",
    "July",
    "August",
    "September",
    "October",
    "November",
    "December"
];

var dt = new Date();
var cur_month_now = month[dt.getMonth()];
dt.setMonth(dt.getMonth() - 1); // Date handles wrapping to previous year
var pre_month_1 = month[dt.getMonth()];
dt.setMonth(dt.getMonth() - 1);
var pre_month_2 = month[dt.getMonth()];
dt.setMonth(dt.getMonth() - 1);
var pre_month_3 = month[dt.getMonth()];
dt.setMonth(dt.getMonth() - 1);
var pre_month_4 = month[dt.getMonth()];
dt.setMonth(dt.getMonth() - 1);
var pre_month_5 = month[dt.getMonth()];

document.getElementById("cur_month").innerHTML = cur_month_now;
document.getElementById("pre_month_1").innerHTML = pre_month_1;
document.getElementById("pre_month_2").innerHTML = pre_month_2;
document.getElementById("pre_month_3").innerHTML = pre_month_3;
document.getElementById("pre_month_4").innerHTML = pre_month_4;
document.getElementById("pre_month_5").innerHTML = pre_month_5;

<div class="dropdown">
  <button class="btn btn-danger dropdown-toggle" type="button" data-toggle="dropdown">Select Month
	  <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li>
      <a href="#" id="cur_month"></a>
    </li>
    <li>
      <a href="#" id="pre_month_1"></a>
    </li>
    <li>
      <a href="#" id="pre_month_2"></a>
    </li>
    <li>
      <a href="#" id="pre_month_3"></a>
    </li>
    <li>
      <a href="#" id="pre_month_4"></a>
    </li>
    <li>
      <a href="#" id="pre_month_5"></a>
    </li>
  </ul>
</div>

Hide result

Answer 3

You can make this a bit more concise and use the modulo operator:

var month = "January,February,March,April,May,June,July,August,September,October,November,December"
           .split(','),
    monthNum = 12 + new Date().getMonth();
Array.from(document.querySelectorAll('.dropdown-menu a'), function (elem, i) {
    elem.textContent = month[(monthNum-i)%12];
});
              

<div class="dropdown">
  <button class="btn btn-danger dropdown-toggle" type="button" data-toggle="dropdown">Select Month
  <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a href="#" id="cur_month"></a></li>
    <li><a href="#" id="pre_month_1"></a></li>
    <li><a href="#" id="pre_month_2"></a></li>
    <li><a href="#" id="pre_month_3"></a></li>
    <li><a href="#" id="pre_month_4"></a></li>
    <li><a href="#" id="pre_month_5"></a></li>
  </ul>
</div>

Run codeHide result

Note. Better to use textContentinstead innerHTML, because you want to put text, not HTML.

Answer 4

Nothing really new, but for less js code ...

function getPrevMonth(date, m) {
  date.setMonth(date.getMonth() - m);
  return date;
}

//no need for such array
locale = "en-us";//or e.g. navigator.languages[0]
var d = new Date();

for (var i=0; i<6; i++){
  //also worth trying: create element instead of writing to exiting ones only: https://www.w3schools.com/jsref/met_document_createelement.asp
  document.getElementById("pre_month_"+i).innerHTML =  getPrevMonth(d,1).toLocaleString(locale, { month: "long" });
}

<div class="dropdown">
  <button class="btn btn-danger dropdown-toggle" type="button" data-toggle="dropdown">Select Month
	  <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li>
      <a href="#" id="pre_month_0"></a>
    </li>
    <li>
      <a href="#" id="pre_month_1"></a>
    </li>
    <li>
      <a href="#" id="pre_month_2"></a>
    </li>
    <li>
      <a href="#" id="pre_month_3"></a>
    </li>
    <li>
      <a href="#" id="pre_month_4"></a>
    </li>
    <li>
      <a href="#" id="pre_month_5"></a>
    </li>
  </ul>
</div>

Run codeHide result