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

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

问题描述:

我目前正在Twitter引导项目中处理一些日期和时间选择器。我总是发现日历在屁股上很痛苦,所以这个问题。Twitter引导程序的日历/日期和时间选择器

有吨的解决方案在那里得到一个工作日历,html5 date input,jquery-ui,pt-BRthe 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,或附上日期选择器插件,如果不是:

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

参考文献: