在Angular中实现未来月份对应input文本输入框的禁用功能

核心逻辑是获取当前时间的年月参数，和输入框绑定的月份属性做比对，符合未来月份条件的输入框直接设置禁用状态即可。

• 首先给每个月份对应的输入框绑定自定义属性，标识其所属的月份和对应年份：

<!-- 示例input结构，可对应你的表格列调整 -->
<input type="text" class="month-input" data-year="2024" data-month="1" placeholder="1月">
<input type="text" class="month-input" data-year="2024" data-month="10" placeholder="10月">
<input type="text" class="month-input" data-year="2024" data-month="11" placeholder="11月">
<input type="text" class="month-input" data-year="2024" data-month="12" placeholder="12月">

• 页面加载完成后执行判断逻辑，禁用符合条件的输入框：

window.onload = function() {
  const now = new Date()
  const currentYear = now.getFullYear()
  // getMonth()返回值为0-11，需+1转换为1-12的自然月份
  const currentMonth = now.getMonth() + 1

  // 遍历所有月份输入框
  document.querySelectorAll('.month-input').forEach(input => {
    const inputYear = Number(input.dataset.year)
    const inputMonth = Number(input.dataset.month)
    // 年份大于当前年 或 同年份月份大于当前月，判定为未来月份
    if(inputYear > currentYear || (inputYear === currentYear && inputMonth > currentMonth)) {
      input.disabled = true
      // 可选：添加禁用样式增强视觉区分
      input.style.backgroundColor = '#eee'
      input.style.cursor = 'not-allowed'
    }
  })
}

如果你的表格仅展示当年的12个月份，可省略年份判断逻辑，仅对比月份即可。

内容的提问来源于stack exchange，提问作者Umang Bisht