JS problem with the month of February in non-leap months-CodePudding

I am implementing a simple calendar, but i have a problem with all non-leap fever months.

If you click on next until February 2023, March is shown, if you advance until 2024 (which is a leap), everything works, how can I solve?

let nav = 0;

let test = () => {
  const dt = new Date();
  dt.setMonth(new Date().getMonth()   nav);
  const day = dt.getDate();
  const month = dt.getMonth();
  const year = dt.getFullYear();
  const monthName = `${dt.toLocaleDateString("en", { month: "long" })} ${year}`;
  
  document.getElementById('feedBack').innerHTML = 'Nav: '   nav   ' - Day: '   1   ' - Month: '   month   ' ( <b>'   monthName   '</b> ) - Year: '   year;
}

test();

#feedBack {margin-top:10px}

<button onclick="nav--;test()">Prev</button>
<button onclick="nav=0;test();">Current</button>
<button onclick="nav  ;test();">Next</button>

<div id="feedBack"></div>

CodePudding user response：

If you wait for two days the problem will be solved hehe (today is 29/06, you are iterating over, 29/07, 29/08, etc.).

Or you could change day of the month object before incrementing the month.

let nav = 0;

let test = () => {
  const dt = new Date();
  dt.setDate(1); // this will move to the first day of the current month
  dt.setMonth(new Date().getMonth()   nav);
  const month = dt.getMonth();
  const year = dt.getFullYear();
  const monthName = `${dt.toLocaleDateString("en", { month: "long" })} ${year}`;
  
  document.getElementById('feedBack').innerHTML = 'Nav: '   nav   ' - Day: '   1   ' - Month: '   month   ' ( <b>'   monthName   '</b> ) - Year: '   year;
}

test();

#feedBack {margin-top:10px}

<button onclick="nav--;test()">Prev</button>
<button onclick="nav=0;test();">Current</button>
<button onclick="nav  ;test();">Next</button>

<div id="feedBack"></div>