如何使所有浏览器都支持<input type =“date”>？ 任何替代品？
我正在使用HTML5元素input属性，只有Google Chrome支持date和时间属性。 我尝试了Modernizr，但我不明白如何将其集成到我的网站（如何编码/语法/包括）。 有关如何使用date，时间属性到所有浏览器的任何代码片段。
任何不支持inputtypesdate浏览器将默认为标准types，即text ，所以您只需检查types属性 （而不是属性） ，如果不是date ，dateinput不受支持浏览器，并添加您自己的dateselect器：
if ( $('[type="date"]').prop('type') != 'date' ) { $('[type="date"]').datepicker(); }
小提琴
你当然可以使用任何你想要的dateselect器，jQuery UI的dateselect器可能是最常用的一个，但是如果你没有使用其他的UI库，它会添加很多的JavaScript，但是有几百种替代的dateselect器从中select。
type属性永远不会改变，浏览器将只会回落到属性的默认texttypes，所以必须检查属性。
该属性仍然可以用作select器，如上例所示。
Modernizr实际上并没有改变任何有关如何处理新的HTML5inputtypes的事情。 这是一个特征检测器 ，而不是一个填充（除了<header> ， <article>等，它被用作类似于<div>块元素处理）。
要使用<input type='date'> ，您需要在自己的脚本中检查Modernizr.inputtypes.date ，如果它是false，请打开另一个提供dateselect器的插件。 你有成千上万的select; Modernizr保留了一个非详尽的polyfill列表 ，可能会给你开始的地方。 或者，你也可以放手 – 所有的浏览器在input一个他们不认识的inputtypes时会回退到text ，所以最糟糕的是你的用户必须inputdate。 （你可能想给他们一个占位符或者使用类似jQuery.maskedinput的东西来保持它们的正确性。）
你问Modernizr的例子，所以在这里你去。 此代码使用Modernizr来检测是否支持“date”inputtypes。 如果不支持，那么它将失败回到JQueryUI datepicker。
注意：您将需要下载JQueryUI，并可能在您自己的代码中更改CSS和JS文件的path。
<!DOCTYPE html> <html> <head> <title>Modernizer Detect 'date' input type</title> <link rel="stylesheet" type="text/css" href="jquery-ui-1.10.3/themes/base/jquery.ui.all.css"/> <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-1.7-development-only.js"></script> <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="jquery-ui-1.10.3/ui/jquery.ui.core.js"></script> <script type="text/javascript" src="jquery-ui-1.10.3/ui/jquery.ui.widget.js"></script> <script type="text/javascript" src="jquery-ui-1.10.3/ui/jquery.ui.datepicker.js"></script> <script type="text/javascript"> $(function(){ if(!Modernizr.inputtypes.date) { console.log("The 'date' input type is not supported, so using JQueryUI datepicker instead."); $("#theDate").datepicker(); } }); </script> </head> <body> <form> <input id="theDate" type="date"/> </form> </body> </html>
我希望这对你有用。
这是一个意见片，但我们与WebShims取得了巨大的成功。 如果native不可用，它可以干净地使用jQuery datepicker。 在这里演示
<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(); }); <- missing semicolon } </script>
<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>
来源1和来源2
只需在<head>部分使用<script type="text/javascript" src="modernizr.js"></script> ，脚本将添加帮助你分开两种情况的类：如果目前的浏览器，如果不是。
另外，请遵循此主题中的链接。 它会帮助你： HTML5inputtypesdate，颜色，范围支持在Firefox和Internet Explorer中
<html> <head> <title>Date picker works for all browsers(IE,Firefox,Crome)</title> <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 $('#start_date').datepicker({ dateFormat: 'yy-mm-dd' }); $('#end_date').datepicker({ dateFormat: 'yy-mm-dd' }); }) } </script> </head> <body> <input name="start_date" id="start_date" type="date" required/> <input name="end_date" id="end_date" required/> </body> </html>
Chrome版本50.0.2661.87 m在分配给variables时不支持mm-dd-yy格式。 它使用yy-mm-dd。 IE和Firefox按预期工作。
我发现最好的简单和工作解决scheme是，在以下浏览器上工作
- 谷歌浏览器
- 火狐
- Microsoft Edge
-
苹果浏览器
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> </head> <body> <h2>Poly Filler Script for Date/Time</h2> <form method="post" action=""> <input type="date" /> <br/><br/> <input type="time" /> </form> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="http://cdn.jsdelivr.net/webshim/1.12.4/extras/modernizr-custom.js"></script> <script src="http://cdn.jsdelivr.net/webshim/1.12.4/polyfiller.js"></script> <script> webshims.setOptions('waitReady', false); webshims.setOptions('forms-ext', {type: 'date'}); webshims.setOptions('forms-ext', {type: 'time'}); webshims.polyfill('forms forms-ext'); </script> </body> </html>
