禁用更改月份日期选择器

如果您想禁用更改日期选择器的月份，以下是一些步骤：

HTML

如果您使用HTML，则可以使用 month input type。

<label for="month">选择月份:</label>
<input type="month" id="month" name="month" value="2021-06" onchange="disableMonthChange()">

JavaScript

您可以使用JavaScript来禁用日期选择器的月份更改功能。 在下面的示例中，我们使用setAttribute()来disable掉Year-Month控件上的Select Month选项。

function disableMonthChange() {
  const monthEle = document.querySelector('#month');
  const controls = monthEle.querySelectorAll('input[type="number"]')
  controls[1].setAttribute('disabled', 'disabled')
}

CSS

还可以使用CSS来禁用日期选择器的select month内置控件。 在下面的示例中，我们使用CSS来将select month下拉菜单中的颜色更改为灰色，并在option中添加disabled属性来禁用更改月份。

input[type="month"]:hover::-webkit-calendar-picker-indicator {
  background-color: gray;
}
input[type="month"]::-webkit-calendar-picker-indicator {
  background-color: gray;
}
input[type="month"]::-webkit-inner-spin-button,
input[type="month"]::-webkit-calendar-picker-indicator {
  display: none;
}
option:disabled {
  color: gray;
}

现在，您已经可以禁用更改日期选择器中的月份了。 请记住，您还可以使用其他技术来实现此目标，例如使用其他JS库或前端框架。