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.

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.

• javascript
• html
• date
• input
• datepicker

• Browsers that don’t support type=date should report the type as the default text when it’s queried via JS … – C3roe Commented Jan 24, 2014 at 10:37

2 Answers 2

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>

Have a look at this polyfill :

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