Javascript 用于Twitter引导的日历/日期和时间选择器_Javascript_Twitter Bootstrap_Datepicker_Timepicker

Javascript 用于Twitter引导的日历/日期和时间选择器

javascript twitter-bootstrap

Javascript 用于Twitter引导的日历/日期和时间选择器,javascript,twitter-bootstrap,datepicker,timepicker,Javascript,Twitter Bootstrap,Datepicker,Timepicker,我目前正在twitter引导项目中使用一些日期和时间选择器。我总是觉得日历的东西让人讨厌，所以我提出了这个问题有很多解决方案可以用来获得一个工作日历，等等。所有这些都有其利弊。html5解决方案可能是最好的，因为它依赖于浏览器的实现，而浏览器的实现通常是为适应设备屏幕大小而构建的。但这在许多浏览器中还没有实现，当然在旧版本中也不受支持。并不是所有的上面都有时间选择器，这将需要一个额外的时间输入与某种面具或东西我的项目被设计成易于在手机上使用，并且可以很好地缩放以适应小屏幕。考虑到这一点，弹出

我目前正在twitter引导项目中使用一些日期和时间选择器。我总是觉得日历的东西让人讨厌，所以我提出了这个问题

有很多解决方案可以用来获得一个工作日历，等等。所有这些都有其利弊。html5解决方案可能是最好的，因为它依赖于浏览器的实现，而浏览器的实现通常是为适应设备屏幕大小而构建的。但这在许多浏览器中还没有实现，当然在旧版本中也不受支持。并不是所有的上面都有时间选择器，这将需要一个额外的时间输入与某种面具或东西

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

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

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

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

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

或者使用Modernizer库：

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

然后初始化日期字段。如果支持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>


如果（dateTypeIsSupported（））{
//HTML5是一个尝试！
document.getElementById（'myDateField'）。类型='date'；
}否则{
//没有HTML5。改用jQueryUI日期选择器。
$（“#myDateField”）.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>