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

11
votes

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

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

enter image description here

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.

2
javascripthtmldateinputdatepicker
Browsers that don’t support type=date should report the type as the default text when it’s queried via JS … - CBroe

2 Answers

13
votes

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>