Question

我目前正在twitter bootstrap项目中处理一些日期和时间选择器。我总觉得日历里的东西很麻烦，所以这个问题。

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

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

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

Answer 1

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

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

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>

参考文献：

Twitter引导程序的日历/日期和时间选择器

1 个答案: