how to make custom month and year picker?

I am trying to make a custom month and year picker. I know there are plugins for it. but I wanted a simple month and year picker. In this code, I have disabled the the year 2023 if the month chosen by user is less than the current month. The code seems to work perfect but there is a minor issue.

1. The year when the page loads should be shown as 2023 but it is displaying 2024.
2. The current year which is 2023 gets disabled when the user selects current month which is July. this shouldn't happen. but this happens only in the start when the page is loaded. but if the user switches from another month to July again then the user is able to select 2023.
   Take this scenario: user opens the page. there is July 2024 instead of July 2023. now the user clicks on year, the 2023 is disabled. now the user clicks on month and selects November. then again after choosing November he choses July again, now the year 2023 is selectable. understanding this scenario means that the issue is only in the start when the page loads.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

let selectedYear = new Date().getFullYear();
function updateYearOptions() {
const currentMonth = new Date().getMonth() + 1;
const selectedMonth = parseInt(document.getElementById('month').value);
const yearSelect = document.getElementById('year');
const currentYear = new Date().getFullYear();
const maxYear = currentYear + 20;
yearSelect.innerHTML = '';
let yearToSelect = selectedYear; // Store the year to select (might change below)
for (let year = currentYear; year <= maxYear; year++) {
const option = document.createElement('option');
option.value = year;
option.textContent = year;
if (year === currentYear && selectedMonth < currentMonth) {
option.disabled = true;
}
if (year === selectedYear && option.disabled) {
yearToSelect = year + 1; // If selected year is disabled, set the yearToSelect to the next available year
}
yearSelect.appendChild(option);
}
yearSelect.value = yearToSelect;
selectedYear = yearToSelect;
document.getElementById('selectedYear').value = yearToSelect;
}
function updateMonthOptions() {
const monthSelect = document.getElementById('month');
const currentMonth = new Date().getMonth() + 1;
monthSelect.value = currentMonth;
}
updateYearOptions();
updateMonthOptions();
function updateSelectedYear() {
selectedYear = parseInt(document.getElementById('year').value);
document.getElementById('selectedYear').value = selectedYear;
}

<!-- language: lang-css -->

body {
font-family: Arial, sans-serif;
text-align: center;
margin-top: 50px;
}
#datepicker {
width: 400px;
padding: 10px;
border: 1px solid #ccc;
}

<!-- language: lang-html -->

<div id="datepicker">
<label for="month">Month:</label>
<select id="month" onchange="updateYearOptions()">
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<label for="year">Year:</label>
<select id="year" onchange="updateSelectedYear()">
</select>
<input type="hidden" id="selectedYear" name="selectedYear">
</div>

<!-- end snippet -->

When updateYearOptions runs for the first time, the value of your month selector is 1 which is less than 7, which fulfills the criteria for disabiling the option for 2023.

Just need to swap the order of the functions that run on init so your month is set first, that way it is correct when compared for the year calculation.

updateMonthOptions();
updateYearOptions();

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

let selectedYear = new Date().getFullYear();
function updateYearOptions() {
const currentMonth = new Date().getMonth() + 1;
console.info('Current Month', currentMonth);
const selectedMonth = parseInt(document.getElementById('month').value);
console.info('Selected Month', selectedMonth);
const yearSelect = document.getElementById('year');
const currentYear = new Date().getFullYear();
const maxYear = currentYear + 20;
yearSelect.innerHTML = '';
let yearToSelect = selectedYear; // Store the year to select (might change below)
for (let year = currentYear; year <= maxYear; year++) {
const option = document.createElement('option');
option.value = year;
option.textContent = year;
if (year === currentYear && selectedMonth < currentMonth) {
option.disabled = true;
}
if (year === selectedYear && option.disabled) {
yearToSelect = year + 1; // If selected year is disabled, set the yearToSelect to the next available year
}
yearSelect.appendChild(option);
}
yearSelect.value = yearToSelect;
selectedYear = yearToSelect;
document.getElementById('selectedYear').value = yearToSelect;
}
function updateMonthOptions() {
const monthSelect = document.getElementById('month');
const currentMonth = new Date().getMonth() + 1;
monthSelect.value = currentMonth;
}
updateMonthOptions();
updateYearOptions();
function updateSelectedYear() {
selectedYear = parseInt(document.getElementById('year').value);
document.getElementById('selectedYear').value = selectedYear;
}

<!-- language: lang-css -->

body {
font-family: Arial, sans-serif;
text-align: center;
margin-top: 50px;
}
#datepicker {
width: 400px;
padding: 10px;
border: 1px solid #ccc;
}

<!-- language: lang-html -->

<div id="datepicker">
<label for="month">Month:</label>
<select id="month" onchange="updateYearOptions()">
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<label for="year">Year:</label>
<select id="year" onchange="updateSelectedYear()">
</select>
<input type="hidden" id="selectedYear" name="selectedYear">
</div>

<!-- end snippet -->