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

Posted 2023-05-07

【中文标题】Firefox 输入类型 = 日期最小值未在最小有效月份打开

【英文标题】：Firefox input type=date min not opening on minimum valid month

【发布时间】：2018-07-05 18:44:43

【问题描述】：

我不确定是否有办法解决这个问题，但是当您使用带有 input type="date" 属性的 input type="date" 时，Firefox 的播放效果不佳：它总是在 current 上打开日期选择器em> 月，而不是最小有效日期开始的月份。如果日期在未来，这尤其令人讨厌。

例如：

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

（请参阅 Firefox 中的 JSFiddle。）

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

【问题讨论】：

日期选择器显示您输入的月份的日历。如果您在月份部分输入08，它将显示8月的日历，

@ildflue 我真的不关注你

可以添加默认值吗？ <input type="date" min="2021-08-08" value="2021-08-08"> 缺点是你必须添加一个默认值。

【参考方案1】：

绕过此行为的一种方法是按照 cmets 中的建议为输入设置一个值。除了在 html 中设置 value 属性，您可以尝试在用户单击输入并显示日期选择器时以编程方式设置它。

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

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

这是一个现场样本：

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;
  
);

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

【讨论】：

谢谢，如果无法在本地告诉 FF，这似乎是最好的解决方案

w3schools.com/tags/att_input_min.asp "注意：min 属性不适用于 Internet Explorer 10+ 或 Firefox 中的日期和时间，因为 IE 10+ 和 Firefox 不支持这些输入类型。"这是你最好的镜头......

【参考方案2】：

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

但这也应该有效。

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

如果是火狐可以识别客户端的浏览器，通过这个JS自动将日期改成最小：

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

【参考方案3】：

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

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