引导输入类型=“日期”不加载日期选择器
Posted
技术标签:
【中文标题】引导输入类型=“日期”不加载日期选择器【英文标题】：bootstrap input type="date" not loading datepicker 【发布时间】：2015-07-25 08:18:21 【问题描述】：我正在尝试使用引导输入类型“日期”来创建带有日期选择器的输入字段，但是虽然输入字段的格式似乎是由引导的样式设置的，但日期选择器似乎没有正在该领域实施。单击该字段时会出现注释，并且我的输入不受限制。这种日期输入类型是否不会原生地创建具有日期类型的输入字段并使输入字段成为日期选择器？ JSBIN Code Here 我的控制台没有显示错误。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JS Bin</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<form>
<div class="form-group">
<div class="row">
<div class="col-md-4 box">
<label>Date</label>
<input type="date" class="form-control" placeholder="Date">
</div>
</div>
</div>
</form>
如果有人能解释为什么它不起作用，我将不胜感激。
【问题讨论】：
取决于浏览器。在 Chrome 中，当悬停输入时，我会在右侧看到一个插入符号。单击时会出现一个日历。输入也仅限于 dd/mm/yyyy 格式的数字。这是一个原生浏览器控件，与 Bootstrap 无关。 对让它在 safari 中工作的想法有什么想法，或者您有没有推荐的其他方法在浏览器中效果更好？ 我以前用过这个github.com/eternicode/bootstrap-datepicker 对内置控件的支持出奇的差caniuse.com/#feat=input-datetime 为什么不使用 ui-bootstrap 的日期选择器？ plunker 【参考方案1】：本机<input type="date"> 仅适用于少数浏览器。 IE 不是其中之一，尽管它现在可以在 Edge 中使用。
在此处查看支持表：http://caniuse.com/#feat=input-datetime
您将需要使用 polyfill 库或 datepicker JS 插件才能让它在任何地方工作。我建议查看 Webshim：https://afarkas.github.io/webshim/demos/#Forms-forms-ext
【讨论】：
【参考方案2】：Firefox 和 IE 目前不支持日期类型。
感谢 webshim 库，我找到了一个简单的解决方法。我只需添加以下代码行，一切正常。注意：webshim 库依赖于 JQuery。
<script src="//cdn.jsdelivr.net/webshim/1.14.5/polyfiller.js"></script>
<script>
webshims.setOptions('forms-ext', types: 'date');
webshims.polyfill('forms forms-ext');
</script>
【讨论】：
以上是关于引导输入类型=“日期”不加载日期选择器的主要内容，如果未能解决你的问题，请参考以下文章