怎么做<input type="date">所有浏览器都支持吗？ 任何替代方案？
[英]How to make <input type="date"> supported on all browsers? Any alternatives?
问题描述
I'm working with HTML5 elements input attributes and only Google Chrome supports the date, time attributes.
我正在使用 HTML5 元素输入属性，只有 Google Chrome 支持日期、时间属性。 I tried Modernizr but I can't understand on how to integrate it on my website(on how to code it/what is the syntax/includes).我尝试了Modernizr，但我无法理解如何将它集成到我的网站上（关于如何对其进行编码/什么是语法/包含）。 Any code snippet there on how to work with date, time attributes to all browsers.关于如何处理所有浏览器的日期、时间属性的任何代码片段。
11 个解决方案
解决方案1
122 已采纳 2013-08-02 15:47:17
Any browser that does not support the input type date will default to the standard type, which is text , so all you have to do is check the type property (not the attribute) , if it's not date , the date input is not supported by the browser, and you add your own datepicker:任何不支持输入类型date浏览器将默认为标准类型，即text ，因此您所要做的就是检查 type属性（而不是属性） ，如果不是date ，则日期输入不受支持浏览器，然后添加自己的日期选择器：
if ( $('[type="date"]').prop('type') != 'date' ) {
$('[type="date"]').datepicker();
}
You can of course use any datepicker you want, jQuery UI's datepicker is probably the one most commonly used, but it does add quite a bit of javascript if you're not using the UI library for anything else, but there are hundreds of alternative datepickers to choose from.您当然可以使用任何您想要的日期选择器，jQuery UI 的日期选择器可能是最常用的一个，但如果您不将 UI 库用于其他任何用途，它确实会添加相当多的 javascript，但有数百种替代日期选择器从中选择。
The type attribute never changes, the browser will only fall back to the default text type for the property, so one has to check the property. type属性永远不会改变，浏览器只会回退到属性的默认text类型，因此必须检查属性。
The attribute can still be used as a selector, as in the example above.该属性仍可用作选择器，如上例所示。
解决方案2
14 2013-08-02 15:47:16
Modernizr doesn't actually change anything about how the new HTML5 input types are handled. Modernizr 实际上并没有改变新的 HTML5 输入类型的处理方式。 It's a feature detector , not a shim (except for <header> , <article> , etc., which it shims to be handled as block elements similar to <div> ).它是一个特征检测器，而不是一个 shim（除了<header> 、 <article>等，它被处理为类似于<div>块元素）。
To use <input type='date'> , you'd need to check Modernizr.inputtypes.date in your own script, and if it's false, turn on another plugin that provides a date selector.要使用<input type='date'> ，你需要在你自己的脚本中检查Modernizr.inputtypes.date ，如果它是假的，打开另一个提供日期选择器的插件。 You have thousands to choose from;您有数千种可供选择； Modernizr maintains a non-exhaustive list of polyfills that might give you somewhere to start. Modernizr 维护了一个 polyfills 的非详尽列表，它们可能会给你一个开始的地方。 Alternatively, you could just let it go - all browsers fall back to text when presented with an input type they don't recognize, so the worst that can happen is that your user has to type in the date.或者，您可以放手 - 所有浏览器在出现他们无法识别的输入类型时都会回退到text ，因此可能发生的最糟糕的情况是您的用户必须输入日期。 (You might want to give them a placeholder or use something like jQuery.maskedinput to keep them on track.) （你可能想给他们一个占位符或使用类似 jQuery.maskedinput 的东西来让他们保持正轨。）
解决方案3
11 2013-08-02 16:30:08
You asked for Modernizr example, so here you go.你问了 Modernizr 的例子，所以你去。 This code uses Modernizr to detect whether the 'date' input type is supported.此代码使用 Modernizr 来检测是否支持“日期”输入类型。 If it isn't supported, then it fails back to JQueryUI datepicker.如果它不受支持，则它会失败返回到 JQueryUI 日期选择器。
Note: You will need to download JQueryUI and possibly change the paths to the CSS and JS files in your own code.注意：您需要下载 JQueryUI，并可能在您自己的代码中更改 CSS 和 JS 文件的路径。
<!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>
I hope this works for you.我希望这对你有用。
解决方案4
7 2014-04-27 09:23:33
<script>
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">
</form>
</body>
解决方案5
6 2013-08-02 15:53:29
This is bit of an opinion piece, but we had great success with WebShims .这有点像评论文章，但我们在WebShims 上取得了巨大的成功。 It can decay cleanly to use jQuery datepicker if native is not available.如果本机不可用，它可以完全衰减以使用 jQuery datepicker。 Demo here 演示在这里
解决方案6
3 2013-08-02 15:40:59
Just use <script src="modernizr.js"></script> in the <head> section, and the script will add classes which help you to separate the two cases: if it's supported by the current browser, or if it's not.只需在<head>部分使用<script src="modernizr.js"></script> ，脚本将添加帮助您区分两种情况的类：如果当前浏览器支持，或者不支持.
Plus follow the links posted in this thread.加上在此线程中发布的链接。 It will help you: HTML5 input type date, color, range support in Firefox and Internet Explorer它将帮助您： Firefox 和 Internet Explorer 中的 HTML5 输入类型日期、颜色、范围支持
解决方案7
2 2016-04-27 20:32:49
Chrome Version 50.0.2661.87 m does not support the mm-dd-yy format when assigned to a variable. Chrome 版本 50.0.2661.87 m 在分配给变量时不支持 mm-dd-yy 格式。 It uses yy-mm-dd.它使用 yy-mm-dd。 IE and Firefox work as expected. IE 和 Firefox 按预期工作。
解决方案8
2 2017-04-13 09:32:09
best easy and working solution i have found is, working on following browsers我发现的最好的简单可行的解决方案是，在以下浏览器上工作
- Google Chrome谷歌浏览器
- Firefox火狐
- Microsoft Edge微软边缘
Safari
苹果浏览器<!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>
解决方案9
2 2019-08-08 10:30:02
Two-Script-Include-Solution (2019):包含两个脚本的解决方案 (2019)：
Just include Better-Dom andBetter-Dateinput-Polyfill in your scripts section.只需在脚本部分包含Better-Dom和Better-Dateinput-Polyfill 。
Here is a Demo:这是一个演示：
http://chemerisuk.github.io/better-dateinput-polyfill/ http://chemerisuk.github.io/better-dateinput-polyfill/
解决方案10
0 2016-01-12 10:21:00
<html>
<head>
<title>Date picker works for all browsers(IE, Firefox, Chrome)</title>
<script>
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>
解决方案11
0 2018-03-02 10:41:01
I was having problems with this, maintaining the UK dd/mm/yyyy format, I initially used the answer from adeneo https://stackoverflow.com/a/18021130/243905 but that didnt work in safari for me so changed to this, which as far as I can tell works all over - using the jquery-ui datepicker, jquery validation.我遇到了这个问题，保持英国 dd/mm/yyyy 格式，我最初使用了来自 adeneo https://stackoverflow.com/a/18021130/243905的答案，但这对我来说在 safari 中不起作用，所以改为这样，据我所知，这一切都有效 - 使用 jquery-ui datepicker，jquery 验证。
if ($('[type="date"]').prop('type') !== 'date') {
//for reloading/displaying the ISO format back into input again
var val = $('[type="date"]').each(function () {
var val = $(this).val();
if (val !== undefined && val.indexOf('-') > 0) {
var arr = val.split('-');
$(this).val(arr[2] + '/' + arr[1] + '/' + arr[0]);
}
});
//add in the datepicker
$('[type="date"]').datepicker(datapickeroptions);
//stops the invalid date when validated in safari
jQuery.validator.methods["date"] = function (value, element) {
var shortDateFormat = "dd/mm/yy";
var res = true;
try {
$.datepicker.parseDate(shortDateFormat, value);
} catch (error) {
res = false;
}
return res;
}
}
解决方案12
-2 2019-04-08 14:36:11
There is a very simple and effective solution for this using filter. 使用过滤器有一个非常简单有效的解决方案。 You simply add the following filter to your functions.php file : 您只需将以下过滤器添加到functions.php文件中：
add_filter( 'wpcf7_support_html5_fallback', '__return_true' );
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.