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

Question

I'm currently working on some date and time pickers in a twitter bootstrap project. 我目前在twitter bootstrap项目中处理一些日期和时间选择器。 I always find the calendar stuff a pain in the ass, hence this question. 我总觉得日历里的东西很麻烦，所以这个问题。

There are tons of solutions out there for getting a working calendar, html5 date input , jquery-ui , pt-BR and the bootstrap datepicker to mention some. 有很多解决方案可以获得工作日历， html5日期输入， jquery-ui ， pt-BR和bootstrap datepicker 。 All of these have their pros and cons. 所有这些都有其优点和缺点。 The html5 solution might be the best since it depends on the browsers implementation which often is built to fit the device screen size. html5解决方案可能是最好的，因为它取决于浏览器实现，它通常是为了适应设备屏幕大小而构建的。 But this is not implemented in many browsers yet and is of course not supported in older version anyways. 但是这还没有在许多浏览器中实现，当然在旧版本中也不支持。 Not all of the above have time pickers in them, which would require an extra input for time with some kind of mask or something... 并非所有上面都有时间选择器，这需要额外输入时间与某种面具或其他东西......

My project has been designed to be easy to use on a mobile phone, and scales well to fit small screens. 我的项目设计为易于在手机上使用，并且可以很好地适应小屏幕。 With this is mind, a pop-up calendar might not be the best solution. 考虑到这一点，弹出日历可能不是最佳解决方案。 However, cannot find any solutions that does not use a pop-up... 但是，找不到任何不使用弹出窗口的解决方案......

My aim with this question is simply to help me and others to find a good solid way to implement date and time pickers in a web page designed for all screens. 我对这个问题的目的只是帮助我和其他人找到一个很好的方法来在为所有屏幕设计的网页中实现日期和时间选择器。 Does anyone have any experience with any of the above, or some other solutions? 有没有人对上述任何一种或其他解决方案有任何经验？

Answer 1

Why not use the HTML5 date input by default, and fall back to the Bootstrap datepicker or jQueryUI datepicker for IE8 and below. 为什么不默认使用HTML5日期输入，并回退到IE8及更低版本的Bootstrap datepicker或jQueryUI datepicker。 Simply use feature detection to decide which option should be used. 只需使用特征检测来决定应该使用哪个选项。

Code to detect if input type 'date' is supported: 用于检测是否支持输入类型“日期”的代码：

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

or use the Modernizr library: 或使用Modernizr库：

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

You can put either of these into your own function: 您可以将其中任何一个放入您自己的函数中：

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

Then initialize your date field. 然后初始化您的日期字段。 Just add type="date" if HTML5 is supported, or attach a datepicker plugin if not: 如果支持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>

References: 参考文献：

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

问题描述

1 个解决方案

解决方案1
4 已采纳 2013-03-08 20:59:05

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

问题描述

1 个解决方案

解决方案1 4 已采纳 2013-03-08 20:59:05

解决方案1
4 已采纳 2013-03-08 20:59:05