在下拉列表中控制月份年份

Question

I am trying to control "Month" and "Year" in drop down list. I am having two fields, "Start Date" and "End Date". In that "Start Date" I am listing the "Current Month" and "Year" like "March 2020". I want to control my "End Date" based of "Start Date". For example if there is no "Month" selected in "Start Date" I should not allow user to select the "End Date". If user select's "MAY 2020" in "Start Date" and in "End Date" I want to display from "May 2020 to next May 2021". Like wise if user select's "June 2020" in "Start Date" and in "End Date" I want to display from "June 2020 to next June 2021". As of now I am displaying the current month and year in both Start and End date. Any one can guide me to achieve this. Thanks in Advance. Below is the code where I am getting current year month to next year.

const fareMon = () => {
    const monthList = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
    const currDate = new Date();
    const year = currDate.getFullYear();
    const months = [];
    let currentMonthIndex = currDate.getMonth();
    let yearsToAdd = 0;
    for (let i = 0; i < 13; i += 1) {
      if (currentMonthIndex === 12) {
        currentMonthIndex = 0;
        yearsToAdd += 1;
      }
      const futYear = year + yearsToAdd;
      months.push(<option value={`${monthList[currentMonthIndex]} ${futYear}`}>{`${monthList[currentMonthIndex]} ${futYear}`}</option>);
      currentMonthIndex += 1;
    }

    return <>{months}</>;
  };  

Answer 1

So, what I have done is, created a getFullYear function, where you can pass year and you will get all the months

Does this help:

const monthList = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];

const getFullYear = (year) => {
  const currentDate = new Date(`01 01 ${year}`);
  const monthYear = [];
  for(;currentDate.getFullYear() === year;){
    const currentMonth = currentDate.getMonth();
    monthYear.push(`${monthList[currentMonth]} ${year}`)
    const nextMonth = currentMonth+1;
    currentDate.setMonth(nextMonth);
  }
  return monthYear;
}

More cleaner and less compute intensive approach would be:

const monthList = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];

const getYear = (year) => {
  return monthList.map((month) => `${month} ${year}`);
}