在浏览器支持不可用的情况下,为 input type="date" 添加 javascript 回退
Posted
技术标签:
【中文标题】在浏览器支持不可用的情况下,为 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 是不够的。以上是关于在浏览器支持不可用的情况下,为 input type="date" 添加 javascript 回退的主要内容,如果未能解决你的问题,请参考以下文章