Twitter bootstrap 的日历/日期和时间选择器答案

【问题标题】：Calendar/date and time picker for Twitter bootstrapTwitter bootstrap 的日历/日期和时间选择器
【发布时间】：2013-03-08 19:10:40
【问题描述】：

我目前正在 Twitter 引导项目中处理一些日期和时间选择器。我总是觉得日历的东西很痛苦，因此这个问题。

有很多解决方案可以获得工作日历，html5 date input、jquery-ui、pt-BR 和 the bootstrap datepicker 等等。所有这些都有其优点和缺点。 html5 解决方案可能是最好的，因为它取决于浏览器的实现，而浏览器的实现通常是为适应设备屏幕尺寸而构建的。但这在许多浏览器中还没有实现，当然在旧版本中也不支持。并非所有以上都包含时间选择器，这需要使用某种面具或其他东西额外输入时间...

我的项目设计为易于在手机上使用，并且可以很好地扩展以适应小屏幕。考虑到这一点，弹出式日历可能不是最佳解决方案。但是，找不到任何不使用弹窗的解决方案...

我提出这个问题的目的只是为了帮助我和其他人找到一种可靠的方法来在为所有屏幕设计的网页中实现日期和时间选择器。有没有人对上述任何一种或其他一些解决方案有任何经验？

【问题讨论】：

标签： javascript twitter-bootstrap datepicker timepicker

【解决方案1】：

为什么不默认使用 HTML5 日期输入，而退回到 IE8 及以下版本的 Bootstrap 日期选择器或 jQueryUI 日期选择器。只需使用特征检测来决定应该使用哪个选项。

检测是否支持输入类型“日期”的代码：

var i = document.createElement("input");
i.setAttribute("type", "date");
return i.type !== "text";

或使用 Modernizr 库：

if (!Modernizr.inputtypes.date) {
  // no native support for <input type="date"> :(
}

您可以将其中任何一个放入您自己的函数中：

function dateTypeIsSupported() {
  // do one of the above methods and return true or false
}

然后初始化您的日期字段。如果支持 HTML5，只需添加 type="date"，如果不支持，请附加 datepicker 插件：

<html>
  <input id='myDateField' />
</html>

<script>
  if ( dateTypeIsSupported() ) {
      // HTML5 is a go!
      document.getElementById('myDateField').type = 'date';
  } else {
      // No HTML5. Use jQueryUI datepicker instead.
      $('#myDateField').datepicker();
  }
</script>

参考资料：

【讨论】：