在浏览器支持不可用的情况下，为 input type="date" 添加 javascript 回退

Posted 2023-02-25

【中文标题】在浏览器支持不可用的情况下，为 input type="date" 添加 javascript 回退

【英文标题】：Add javascript fallback for input type="date" where browser support is not available

【发布时间】：2014-02-15 07:19:50

【问题描述】：

向输入字段添加日期类型现在会生成一个基于浏览器的日期选择器。 （在支持的情况下）。

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

这对于触控设备来说太棒了……

当浏览市场的肉：Firefox 和 Internet Explorer 时，不支持键入日期。

---

问题

当支持不可用时，如何使用输入 type="date" 并回退到 javascript 日期选择器？

目前，如果不同时生成两个日期选择器，我似乎无法两全其美。

【问题讨论】：

不支持type=date的浏览器在通过JS查询时应该将类型报告为默认text ...

【参考方案1】：

您应该考虑使用modernizr，它使用 JS 来计算当前浏览器具有哪些功能。在下面的示例中，如果此浏览器不兼容，您可以提供另一个日期选择器：

<script src="modernizr.js"></script>
<script>Modernizr.load(
  test: Modernizr.inputtypes.date,
  nope: ['http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js', 'jquery-ui.css'],
  complete: function () 
    $('input[type=date]').datepicker(
      dateFormat: 'yy-mm-dd'
    ); 
  
);
</script>

【讨论】：

这很好，可以解决问题。但是，如果可以避免的话，我会严格使用多余的代码。对于我想要实现的目标，这方面的开销很大。是否可以仅针对这一功能进行兼容性检查。

如果您只想将 YepNope 与 Modernizr.load 一起使用，您可以使用它。 modernizr.com/download/#-load 对于其他类型的输入、CSS 转换和 html5shiv，我倾向于使用 Modernizr 进行特征检测。这几乎是我构建的先决条件，所以我会再考虑包括更多的功能检测:)

谢谢@richieahb。我会更深入地研究它。

你还需要modernizr包中的输入检测，你可以在这个包modernizr.com/download/#-inputtypes-load找到它，它只有6kb。

请注意，'nope' 现在已被弃用，并且无法有条件地加载脚本等。您现在必须使用 jQuery 或其他工具来加载脚本（或者如果您不这样做，请始终加载它们'不关心速度较慢的页面）。

【参考方案2】：

看看这个 polyfill：

https://github.com/chemerisuk/better-dateinput-polyfill

【讨论】：

后备脚本和类型检测器合二为一。日期选择器实际上比我开始使用的更小更好。非常感谢。

但是有很多依赖。 jQuery 是不够的。