如何在所有浏览器中使用input type = date

时间:2014-03-26 06:55:19

标签: jquery asp.net-mvc html5 jquery-ui datepicker

使用

创建日期输入表单
<form method='post' action='saveform'>
Enter date
<input type='date' value='2014-03-26' name='datefield1'/>
</form>

Chrome显示本地化日期,允许选择并执行验证。

如果日期初始值为空,Safary Mac OS X和IE显示空字段,不允许选择并且不执行验证。 用户不知道使用哪种日期格式。

如何解决此问题,以便日期条目在IE和Safary中有效。 最关键的是空日期问题。对于空日期,应该向用户提供日期格式指示(yyyy-mm-dd),以便用户知道预期的日期格式。 使用本地化日期进行输入,执行验证并允许从日历中选择也很不错。

如果可能,发送到表单上的服务器的值最好始终采用yyyy-mm-dd格式。在最坏的情况下,控制器可以更改为接受不同的格式。

使用原生输入类型=&#39;日期&#39;如果浏览器支持它应该使用它,因为在chrome中它看起来比jquery-ui日期选择器好得多。

使用jquery,jquery ui,ASP .NET MVC4,Mono。

是否可以添加一些简单的代码或javascript来模拟输入类型=&#39; date&#39;在不受支持的浏览器? 如果输入类型=&#39;日期&#39;如何取消浏览器支持吗?

2 个答案:

答案 0 :(得分:1)

回答你的第一个问题

  

是否可以在不支持的浏览器中添加一些模拟输入类型='日期'的简单代码或javascript?

有大量的jquery datepicker库,你可以搜索和实现

  

如果浏览器支持输入type ='date',如何确定?

由于您使用的是ASP.NET MVC 4,因此内置了Modernizr.js,因此您可以尝试这样做:

if (Modernizr.inputtypes.date) {
    $('label').text("Support");
} 
else {
    // do your datapicker here
}

答案 1 :(得分:0)

在document.ready function

上使用此功能
$( "#datepicker" ).datepicker({ dateFormat: "yy-mm-dd" });