自定义年月选择器需求：仅显示当前及后续月份

要实现只显示当前月份及之后月份的需求，你可以在页面初始化时获取当前月份，然后隐藏所有值小于当前月份的选项。以下是修改后的完整代码：

修改后的JavaScript代码 #

$(document).ready(function() {
    // 初始化：隐藏过往月份
    const currentMonth = new Date().getMonth() + 1; // getMonth()返回0-11，加1转为实际月份
    $('select.month option').each(function() {
        const optionValue = parseInt($(this).val(), 10);
        // 跳过占位符选项，隐藏值小于当前月份的选项
        if (!isNaN(optionValue) && optionValue < currentMonth) {
            $(this).hide();
        }
    });

    // 设置默认年份
    const currentYear = new Date().getFullYear();
    $('#year').text(currentYear);

    $('select.month').change(function() {
        const selectedMonth = $(this).val();
        const sd = `${selectedMonth}-01`;
        const ed = moment(sd).clone().endOf('month').format('MM-DD');
        const startOfMonth = `${currentYear}-${sd}`;
        const endOfMonth = `${currentYear}-${ed}`;
        
        console.log(startOfMonth);
        console.log(endOfMonth);
    });
});

修改后的HTML代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<select class="month" placeholder="Month">
  <option name="" value="" style="display:none;">MM</option>
  <option name="January" id="01" value="01">January</option>
  <option name="February" id="02" value="02">February</option>
  <option name="March" id="03" value="03">March</option>
  <option name="April" id="04" value="04">April</option>
  <option name="May" id="05" value="05">May</option>
  <option name="June" id="06" value="06">June</option>
  <option name="July" id="07" value="07">July</option>
  <option name="August" id="08" value="08">August</option>
  <option name="September" id="09" value="09">September</option>
  <option name="October" id="10" value="10">October</option>
  <option name="November" id="11" value="11">November</option>
  <option name="December" id="12" value="12">December</option>
</select>
<select>
  <option id="year"></option>
</select>

关键说明 #

1. 初始化隐藏逻辑：页面加载时获取当前月份（注意getMonth()返回0-11，需加1转换为1-12的实际月份），遍历所有月份选项，隐藏值小于当前月份的选项。
2. 优化原代码：移除了重复的日期和年份获取逻辑，简化了年份设置的代码，让整体逻辑更简洁。
3. 保留原有功能：修改后依然保留了选择月份后计算当月起始和结束日期的功能。

内容的提问来源于stack exchange，提问作者Vishwa Gawade