Twitter引導程序的日曆/日期和時間選擇器

我目前正在Twitter引導項目中處理一些日期和時間選擇器。我總是發現日曆在屁股上很痛苦，所以這個問題。Twitter引導程序的日曆/日期和時間選擇器

有噸的解決方案在那裏得到一個工作日曆，html5 date input,jquery-ui,pt-BR和the bootstrap datepicker提一些。所有這些都有其優點和缺點。 html5解決方案可能是最好的，因爲它取決於瀏覽器的實現，而這通常是爲了適應設備屏幕尺寸而構建的。但是，這在許多瀏覽器中尚未實現，並且舊版本當然不支持。並非所有的上面都有時間選擇器，這需要額外的時間輸入某種面具或其他東西......

我的項目被設計爲易於在手機上使用，以適應小屏幕。有了這個想法，彈出式日曆可能不是最好的解決方案。然而，找不到任何解決方案，不使用彈出...

我的這個問題的目的只是爲了幫助我和其他人找到一個很好的可靠的方式來實現在設計的網頁中的日期和時間選擇器適用於所有屏幕。有沒有人有任何上述經驗或其他解決方案？

來源

2013-03-08 Runar Halse

默認情況下，爲什麼不使用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>

參考文獻：

來源

2013-03-08 20:59:05 eterps

Twitter引導程序的日曆/日期和時間選擇器

回答

相關問題