对于我正在开发的 MVC 应用程序,我们在页面上有一些日期字段。
我最初的反应是使用 jQuery UI 的 datepicker,但我们遇到了一个小问题——我们还希望这个应用程序可以在 iPad 上运行。因此,我被要求研究使用 HTML5<input type="date" />
标记,但如果浏览器不支持它,则退回到日期选择器。
另一个小问题:IE 是邪恶的。
显然,IE确实“支持” <input type="date" />
;它只是在单击时不显示日历。
一个简短的、经过净化的标记:
@* In the HTML body... *@
@Html.InputFor(m => m.SomeDate, new { id="A", type="date" })
@Html.InputFor(m => m.SomeOtherDate, new { id="B", type="date" })
<script>
var $A = $('#A'),
$B = $('#B');
$(document).ready(function () {
fallbackToDatepicker($A);
fallbackToDatepicker($B);
@* ...SNIP: Other operations here... *@
});
function fallbackToDatepicker($field) {
if($field.type() != "date") {
console.log($field.selector + " is not a date field!");
$field.datepicker();
}
}
</script>
(解决方案基于:http ://www.javascriptkit.com/javatutors/createelementcheck2.shtml )
我要解决的问题是确定客户端是否正在运行没有本机日历弹出窗口的浏览器<input type="date" />
;如果客户端在这样的浏览器上运行,我需要回退到日期选择器。
问题:确定客户端浏览器是否支持日期弹出窗口的更准确但仍然优雅/编程的方式是什么?
(注意:我建议我的团队放弃愚蠢的日期输入,而只使用日期选择器。)