What is the minimal code I need to include from Webshim to get HTML5 date input to work?

1
votes

I would like to get the HTML5 input date-picker to work on normally incompatible browsers, i.e. to have the look and functionaly as close as possible to jQuery's datepicker.

By including the libraries described in the documentation (inserted here at bottom) + the whole folder shims I get it to work as expected.

But as the shim folder contains many extraneous files - how do I understand which ones I should keep and which to throw away as there doesn't seem to be an option to custom build the Webshim library?

<script src="js/jquery-1.9.1.js"></script>
<script src="js/modernizr-yepnope-custom.js"></script>  
<script src="js-webshim/minified/polyfiller.js"></script>
<script>
  $.webshims.polyfill('forms');
</script>
1
javascripthtmldatecross-browserwebshim

1 Answers

1
votes

While you can do this, I don't understand your exact problem here. The polyfiller.js will optimize the packages automatically for all browsers and webspace isn't that expensive (it's about 2mb on your server).

You can throw away:

The following directorys: - FlashCanvas - FlashCanvasPro - jpicker

and all js files inside the shims folder, but form-*.js, dom-extend and es5.js

But again there is no need to do this. I don't understand why this is important. The only thing I do understand is to remove *.php from the directories (i.e.: in Flashcanvas...)

If you want to have as close as jQuery's datepicker you should set some conig options like startView, showOnFocus and so on for the date widget.

<style>
.date-input-buttons .step-controls {
    display: none;
}
</style>

<input id="date-1" type="date" data-date='{"startView": 2, "openOnFocus": true}' placeholder="yyyy-mm-dd" />

http://jsfiddle.net/trixta/VNuct/