如何在不设默认值与min属性的情况下设置date输入框默认显示八月？

现有一个简单的日期输入框：

<input type="date" id="inp_DateDep"  />

点击该输入框时，希望默认显示八月。

尝试过设置最小值为当月第一天：

<input type="date" id="inp_DateDep" min="2023-08-01" />

但这样会导致用户无法选择八月一日之前的日期，而少数场景下用户仍需要选择七月的日期，只是八月的选择需求更频繁。

想问：是否存在一种方法，无需设置默认值或使用min属性，即可指定type="date"输入框默认显示的月份？

解决方案 #

原生的type="date"输入框并没有直接提供“默认显示指定月份但不限制选择范围”的API——它的日历面板默认会打开到当前系统日期所在的月份，或者输入框已设置的value对应的月份。

不过可以通过JavaScript实现这个需求，核心思路是：在输入框获得焦点的瞬间，临时设置一个目标月份的日期作为value，等日历面板展开后再清空这个临时值。这样既不会留下默认值，又能让日历默认显示目标月份，同时不限制用户选择其他月份的日期。

示例代码如下：

const dateInput = document.getElementById('inp_DateDep');

dateInput.addEventListener('focus', function() {
  // 保存输入框原本的内容（如果有的话）
  const originalValue = this.value;
  // 设置临时值为目标月份的任意一天
  this.value = '2023-08-15';
  
  // 延迟恢复原内容，确保浏览器先渲染出目标月份的日历面板
  setTimeout(() => {
    this.value = originalValue || '';
  }, 100);
});

这个方法利用了浏览器渲染日历的时机：当输入框value变化时，日历面板会自动跳转到对应月份；等面板展开后恢复原value，就不会影响用户后续选择，同时达成默认显示指定月份的效果。

注意：不同浏览器对date输入框的实现存在细微差异，这个方案在Chrome、Firefox、Edge等主流浏览器中均可正常工作。

内容的提问来源于stack exchange，提问作者Antoine Pelletier