CODEWITHSUNDEEP
javascripthtmldateinputdatepicker
DreamTeK
DreamTeK

Reputation: 34177

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

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.

Upvotes: 11

Views: 5894

Answers (2)

Sebastien C.
Sebastien C.

Reputation: 4833

Have a look at this polyfill :

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

Upvotes: 7

RichieAHB
RichieAHB

Reputation: 2088

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>

Upvotes: 13

Related Questions