How to make input type date supported on all browsers Any alternatives

Question

I m working with HTML5 elements input attributes and only Google Chrome supports the date  time attributes  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   Any code snippet there on how to work with date  time attributes to all browsers

User · Answer

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>

User · Answer

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   if       type  date     prop  type       date              type  date     datepicker        FIDDLE  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   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  The attribute can still be used as a selector  as in the example above

User · Answer

Two-Script-Include-Solution  2019    Just include Better-Dom and Better-Dateinput-Polyfill in your scripts section   Here is a Demo  http   chemerisuk github io better-dateinput-polyfill

User · Answer

You asked for Modernizr example  so here you go  This code uses Modernizr to detect whether the  date  input type is supported  If it isn t supported  then it fails back to JQueryUI datepicker   Note  You will need to download JQueryUI and possibly change the paths to the CSS and JS files in your own code    lt  DOCTYPE html gt   lt html gt       lt head gt           lt title gt Modernizer Detect  date  input type lt  title gt           lt link rel  stylesheet  type  text css  href  jquery-ui-1 10 3 themes base jquery ui all css   gt           lt script type  text javascript  src  http   ajax aspnetcdn com ajax modernizr modernizr-1 7-development-only js  gt  lt  script gt           lt script type  text javascript  src  http   code jquery com jquery-1 10 2 min js  gt  lt  script gt           lt script type  text javascript  src  jquery-ui-1 10 3 ui jquery ui core js  gt  lt  script gt           lt script type  text javascript  src  jquery-ui-1 10 3 ui jquery ui widget js  gt  lt  script gt           lt script type  text javascript  src  jquery-ui-1 10 3 ui jquery ui datepicker js  gt  lt  script gt           lt script type  text javascript  gt                function                    if  Modernizr inputtypes date                        console log  The  date  input type is not supported  so using JQueryUI datepicker instead                             theDate   datepicker                                               lt  script gt       lt  head gt       lt body gt           lt form gt               lt input id  theDate  type  date   gt           lt  form gt       lt  body gt   lt  html gt    I hope this works for you

User · Answer

lt html gt   lt head gt   lt title gt Date picker works for all browsers IE  Firefox  Chrome  lt  title gt   lt script gt      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   lt link href  http   ajax googleapis com ajax libs jqueryui 1 8 themes base jquery-ui css  rel  stylesheet  type  text css    gt  n           document write   lt script src  http   ajax googleapis com ajax libs jquery 1 4 jquery min js  gt  lt   script gt  n           document write   lt script src  http   ajax googleapis com ajax libs jqueryui 1 8 jquery-ui min js  gt  lt   script gt  n          lt  script gt    lt script gt      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                                    lt  script gt   lt  head gt   lt body gt       lt input name  start date  id  start date  type  date  required gt       lt input name  end date  id  end date  required gt   lt  body gt   lt  html gt

User · Answer

Just use  lt script src  modernizr js  gt  lt  script gt  in the  lt head gt  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   Plus follow the links posted in this thread  It will help you  HTML5 input type date  color  range support in Firefox and Internet Explorer

User · Answer

Chrome Version 50 0 2661 87 m does not support the mm-dd-yy format when assigned to a variable  It uses yy-mm-dd  IE and Firefox work as expected

User · Answer

This is bit of an opinion piece  but we had great success with WebShims  It can decay cleanly to use jQuery datepicker if native is not available  Demo here

User · Answer

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   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  amp  amp  val indexOf  -    gt  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

User · Answer

lt script gt        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   lt link href  http   ajax googleapis com ajax libs jqueryui 1 8 themes base jquery-ui css  rel  stylesheet  type  text css    gt  n            document write   lt script src  http   ajax googleapis com ajax libs jquery 1 4 jquery min js  gt  lt   script gt  n            document write   lt script src  http   ajax googleapis com ajax libs jqueryui 1 8 jquery-ui min js  gt  lt   script gt  n               lt  script gt     lt script gt      if  datefield type     date        if browser doesn t support input type  date   initialize date picker widget         jQuery function         on document ready                birthday   datepicker                lt - missing semicolon         lt  script gt       lt body gt    lt form gt      lt b gt Date of birth  lt  b gt      lt input type  date  id  birthday  name  birthday  size  20  gt      lt input type  button  value  Submit  name  B1  gt    lt  form gt   lt  body gt    SOURCE 1   amp  SOURCE 2

User · Answer

Modernizr doesn t actually change anything about how the new HTML5 input types are handled  It s a feature detector  not a shim  except for  lt header gt    lt article gt   etc   which it shims to be handled as block elements similar to  lt div gt      To use  lt input type  date  gt   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  You have thousands to choose from  Modernizr maintains a non-exhaustive list of polyfills that might give you somewhere to start  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   You might want to give them a placeholder or use something like jQuery maskedinput to keep them on track

[javascript] How to make <input type="date"> supported on all browsers? Any alternatives?

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to jquery-ui