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>

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.

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

RichieAHB · Accepted Answer · 2014-01-24 10:33:55Z

13

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>

answered Jan 24, 2014 at 10:33

RichieAHB

2,0882 gold badges21 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

DreamTeK Over a year ago

This is great and would solve the issue. However I am strict about using excess code if it can be avoided. The overhead on this is a lot for what I want to achieve. Is it possible to do a compatibility check just for this one feature.

RichieAHB Over a year ago

If you only want to use YepNope with Modernizr.load you can just use that. modernizr.com/download/#-load I tend to use Modernizr for feature detection quite a lot for other types of input, CSS transforms and html5shiv. It's almost a pre-requisit for my builds so I'd give a second thought to including more of it's feature detection too :)

DreamTeK Over a year ago

Thanks @richieahb. I will take a deeper look at it.

RichieAHB Over a year ago

You will also need the input detection in the modernizr bundle which you can find in this package modernizr.com/download/#-inputtypes-load and it's only 6kb.

Alexander Derck Over a year ago

Note that the 'nope' is now deprecated and won't work to conditionally load scripts etc. You will now have to use jQuery or something else to load the scripts (or always load them if you don't care about slower pages).

Sebastien C. · Accepted Answer · 2014-01-24 10:39:22Z

7

Have a look at this polyfill :

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

answered Jan 24, 2014 at 10:39

Sebastien C.

4,8602 gold badges24 silver badges33 bronze badges

2 Comments

DreamTeK Over a year ago

Fallback script and type detector all in one. The date picker is actually smaller and better than the one I had to start with. Many thanks.

netAction Over a year ago

But with a lot of dependencies. JQuery is not enough.

Collectives™ on Stack Overflow

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

QUESTION

2 Answers 2

5 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

QUESTION

2 Answers 2

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related