如何实现月份选择器默认选中当前月份且禁用其他月份

搞定这个需求其实很简单，咱们分两步就能实现：让输入框默认选中当前月份，同时锁死其他月份的选择权限。下面是具体的实现方案和完整代码：

核心思路 #

要达成两个目标：

• 让月份选择器默认显示当前系统月份
• 限制用户只能选择当前月份，其他月份直接不可选

具体实现步骤 #

1. 用JavaScript设置默认选中值 #

type="month"的输入框要求值的格式是YYYY-MM，所以我们需要获取当前日期并格式化成这个标准格式，再赋值给输入框的value属性。

2. 通过HTML属性锁定可选范围 #

给输入框添加min和max属性，值都设置为当前月份的YYYY-MM格式，这样浏览器会自动禁用除当前月之外的所有选项，用户没法选其他月份。

完整代码 #

<div class="col-md-6 form-group">
  <label for="">Month : </label>
  <div class="input-group">
    <div class="input-group-prepend">
      <span class="input-group-text">
        <i class="far fa-calendar-alt"></i>
      </span>
    </div>
    <input type="month" class="form-control" id="thismonth" name="thismonth">
  </div>
</div>

<script>
// 获取当前日期对象
const currentDate = new Date();
// 提取4位年份
const currentYear = currentDate.getFullYear();
// 提取月份（注意getMonth()返回0-11，所以要+1，还要补前导0保证两位格式）
const currentMonthStr = String(currentDate.getMonth() + 1).padStart(2, '0');
// 组合成YYYY-MM格式的字符串
const currentMonth = `${currentYear}-${currentMonthStr}`;

// 获取月份选择器元素
const monthPicker = document.getElementById('thismonth');
// 设置默认选中值
monthPicker.value = currentMonth;
// 设置可选范围的最小和最大值为当前月，锁定选择
monthPicker.min = currentMonth;
monthPicker.max = currentMonth;
</script>

细节说明 #

• getMonth()返回的是0到11的整数（0代表1月），所以必须加1才能得到实际的月份数字
• padStart(2, '0')用来确保月份是两位数字（比如1月变成"01"），这样才能符合type="month"输入框的格式要求
• 把min和max设为同一个值，就完全限制了用户只能选择当前月份，点击下拉框时其他月份会是灰色不可选状态

内容的提问来源于stack exchange，提问作者faisal satti