日历/日期和时间选择为Twitter引导

Calendar/date and time picker for Twitter bootstrap

本文关键字：Twitter 引导 选择 时间 日期 日历      更新时间：2023-09-26

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

有大量的解决方案，在那里获得一个工作日历，html5日期输入，jquery-ui, pt-BR和bootstrap日期选择器等等。所有这些都有其优缺点。html5解决方案可能是最好的，因为它取决于浏览器的实现，通常是为了适应设备屏幕尺寸而构建的。但这在许多浏览器中还没有实现，当然在旧版本中也不支持。并不是所有的上面都有时间选择器，这将需要一个额外的输入时间与某种掩码或其他东西…

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

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

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

检测是否支持输入类型'date'的代码:

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"，如果不支持，则附加一个日期拾取器插件:

<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>

引用:

  • http://diveinto.html5doctor.com/detect.html输入类型
  • http://tjvantoll.com/2012/06/30/creating-a-native-html5-datepicker-with-a-fallback-to-jquery-ui/
  • 如何判断浏览器是否支持
相关文章：