Add javascript fallback for input type="date" where browser support is not available

Question

Adding type date to input fields now produces a browser based date picker. (Where supported).

<input type="date"></input>

This is fantasic for touch devies however...

When browsing with the meat of the market: firefox and internet explorer, type date is not supported.

---

QUESTION

How to use input type="date" and fallback to a javascript date picker when support is not available?

Currently I cant seem to get the best of both worlds without producing both date pickers simultaneously.

Answer 1

You should look into using modernizr which uses JS to work out what features the current browser has. In the below example you can serve another datepicker if this browser isn't compatible:

<script src="modernizr.js"></script>
<script>Modernizr.load({
  test: Modernizr.inputtypes.date,
  nope: ['http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js', 'jquery-ui.css'],
  complete: function () {
    $('input[type=date]').datepicker({
      dateFormat: 'yy-mm-dd'
    }); 
  }
});
</script>

Answer 2

Have a look at this polyfill :

https://github.com/chemerisuk/better-dateinput-polyfill