How to make <input type = "date"> supported in all browsers? Any alternatives?
I work with HTML5 input attributes, and only Google Chrome supports date and time attributes. I tried Modernizr , but I can’t figure out how to integrate it on my site (how to encode it / what the syntax is / includes). Any piece of code on how to work with date and time attributes for all browsers.
Any browser that does not support the date input type will default to the standard type that is text , so all you have to do is check the property type (not an attribute), if it is not date , the date input is not supported by the browser, and you add your own datepicker:
if ( $('[type="date"]').prop('type') != 'date' ) { $('[type="date"]').datepicker(); } You can, of course, use whatever datepicker you want, the jQuery UI datepicker is probably the most commonly used, but it adds quite a lot of javascript if you don't use the user interface library for anything else, but there are hundreds of alternative date pickers to choose from .
The type attribute never changes, the browser only returns to the default text type for the property, so you need to check the property.
The attribute can still be used as a selector, as in the example above.
Modernizr doesn't actually change anything about how the new HTML5 input types are handled. This is a sign of a function, not a pad (except for <header> , <article> , etc., which it adjusts as block elements similar to <div> ).
To use <input type='date'> , you will need to check Modernizr.inputtypes.date in your own script, and if it is false, include another plugin that provides a date selector. You have thousands to choose from; Modernizr maintains a non-exhaustive list of poly regiments , which may give you the opportunity to get started. Alternatively, you can just let it go - all browsers return to text when they are assigned an input type that they don’t recognize, so the worst that can happen is that your user must enter a date. (You might want to give them a placeholder or use something like jQuery.maskedinput to keep them on the go.)
You asked for an example of Modernizr, so go ahead. This code uses Modernizr to determine if the input type is "date". If it is not supported, it does not return to the jQueryUI datepicker.
Note. You will need to download JQueryUI and possibly change the paths to the CSS and JS files in your own code.
<!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.
<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> Just use <script src="modernizr.js"></script> in the <head> section, and the script will add classes to help you separate the two cases: whether it is supported by the current browser or not,
Plus, follow the links posted in this thread. Help: HTML5 input type date, color, range support in Firefox and Internet Explorer
Chrome version 50.0.2661.87 m does not support the mm-dd-yy format when assigning a variable. It uses yy-mm-dd. IE and Firefox work as expected.
<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> The best lightweight and working solution I've found works on the 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>
I had problems with this, while supporting the UK format dd / mm / yyyy, I initially used the answer from adeneo https://stackoverflow.com/a/2129011/212101/ but it didn’t work in safari for me it changed so much that as far as I I can tell, it works everywhere - using jquery-ui datepicker, jquery validation.
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; } } There is a very simple and effective solution using a filter for this. You simply add the following filter to your functions.php file:
add_filter( 'wpcf7_support_html5_fallback', '__return_true' );