Firefox输入类型=日期最小值未在最小有效月份打开

Question

我不确定是否有办法解决这个问题，但当你使用input type="date" min=属性时，Firefox无法很好地发挥作用：它总是在当前月，而不是最小有效日期开始的月份。如果日期是将来，这尤其令人讨厌。

例如：

<input type="date" min="2021-08-04">

（请参阅Firefox中的JSFiddle。）

用户必须手动滚动月份，直到他们最终到达可用的那个月。不太理想！

Answer 1

绕过此行为的一种方法是根据评论中的建议为输入设置值。您可以尝试在用户点击输入并以日志选择器显示时以编程方式设置它，而不是在HTML中设置value属性。

我认为focus / focusin是用来捕获的最佳事件，因为据我所知，没有 show / input[type="date"]上的open 个活动。

在MDN page上，“事件”部分仅提及change和input。

这是一个实时样本：

＆＃13;

＆＃13;

var dateControl = document.querySelector('input[type="date"]');
dateControl.addEventListener("focus", function(){
  // You can add validation on value
  if( this.min && !this.value ){
    this.value = this.min;
  }
});

＆＃13;

<input type="date" min="2021-08-08">

＆＃13;

＆＃13;

＆＃13;

Answer 2

我知道这不是一个非常好的解决方案，因为浏览器可以随时被欺骗。

但这也应该有效。

HTML：<input id="dateInput" type="date" min="2021-08-08">

如果是Firefox，您可以识别客户端的浏览器，并通过此JS自动更改日期以最小化：

if (navigator.userAgent.indexOf("Firefox") != -1) {
document.getElementById("dateInput").value = document.getElementById("dateInput").min; 
}

Answer 3

您可以使用value属性设置默认值。

<input type="date" min="2021-08-04" value="2021-08-04">