跨浏览器日期选择器组件（与移动和桌面浏览器兼容）和 Bootstrap

Question

是否有适用于移动浏览器（Android、iOS、Windows phone）以及标准浏览器的日期选择器库？如果它与 Bootstrap css 兼容，并且它可以尽可能回退到原生 html5 日期字段，那将是完美的。请推荐一些东西。我试过 - webshims（在 Android 和 IE 中损坏） - pickadate（对它的行为不满意）

Answer 1

JQuery UI 是你的朋友...这是一个示例

<head>
<script type="text/javascript">
    var datefield=document.createElement("input")
    datefield.setAttribute("type", "date")
    if (datefield.type!="date"){ //if browser doesn't support input type="date", load files for jQuery UI Date Picker
        document.write('<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />\n')
        document.write('<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"><\/script>\n')
        document.write('<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"><\/script>\n') 
}
</script>

<script>
if (datefield.type!="date"){ //if browser doesn't support input type="date", initialize date picker widget:
    jQuery(function($){ //on document.ready
        $('#birthday').datepicker();
    })
}
</script>
</head>

<body>
    <form>
        <b>Date of birth:</b>
        <input type="date" id="birthday" name="birthday" size="20" />
        <input type="button" value="Submit" name="B1"></p>
    </form>
</body>

跨浏览器日期选择器组件（与移动和桌面浏览器兼容）和 Bootstrap

Cross-browser datepicker component (compatible with mobile and desktop browsers) and with Bootstrap

html

mobile

cross-browser

datepicker

twitter-bootstrap