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

2022-12-08 12:33:24

我目前正在Twitter引导项目中从事某些日期和时间选择器的工作.我总是觉得日历上的东西很麻烦,因此是这个问题.

有很多解决方案可以获取工作日历,例如html5 date input、jquery-ui、pt-BR和the bootstrap datepicker.所有这些都有其优点和缺点. html5解决方案可能是最好的,因为它取决于通常根据设备屏幕尺寸而构建的浏览器实现.但这尚未在许多浏览器中实现,当然无论如何在较旧的版本中不支持.并非以上所有方法中都包含时间选择器,这需要使用某种面罩或其他东西进行额外的时间输入…

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

我想解决这个问题的目的仅仅是帮助我和其他人找到在所有屏幕设计的网页中实现日期和时间选择器的可靠方法.是否有人对以上任何内容或其他解决方案有任何经验？

解决方法:

为什么不默认使用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>

参考文献：

> http://diveinto.html5doctor.com/detect.html#input-types
> http://tjvantoll.com/2012/06/30/creating-a-native-html5-datepicker-with-a-fallback-to-jquery-ui/
> How can I tell if a browser supports <input type=’date’>

码农公寓

相关文章