Configuring of HTML5 input-widgets (input[type="range"], input[type="date"], input[type="number"] polyfills)
Using custom widgets in all browsers
//implement custom datalist in all browsers
$.webshims.setOptions('forms', {
customDatalist: true
});
//implement custom [type="date"]/[type="range"] widgets in all browsers
$.webshims.setOptions('forms-ext', {
replaceUI: true
});
Note: If you also replace the native input widgets, you should also customize the error-bubble. The fastest way of doing this would look like this:
$('form').bind('firstinvalid', function(e){
//show the invalid alert for first invalid element
$.webshims.validityAlert.showFor( e.target );
//prevent browser from showing his native validation message
return false;
});
Changing default-options for range and date
The range and date widgets are using jQuery UI. You can use all options for slider and datepicker
Note that some options will be overwritten by the native HTML5 elements (disabled, value, max/maxDate, min/minDate, step etc.).
$.webshims.setOptions('forms-ext', {
slider: {
range: 'min',
animate: true
},
datepicker: {
showAnim: 'slideDown',
changeMonth: true,
changeYear: true
}
});
You can also override defaults with your markup using data-slider/data-datepicker attributes.
<input type="range" data-slider='{"range": "max"}' />
The best way to change the locale and dateformat of your datepicker is to use $.webshims.activeLang method before you call polyfill:
/*load russian localization*/
$.webshims.activeLang("ru");
/*as you can see you can call this also later*/
Loading jQuery UI from another source
Webshims lib trys to load the hole jQuery UI library. This isn't often usefull and can be changed by changing $.webshims.modules["jquery-ui"].src.
// relative from shims-folder
$.webshims.modules["jquery-ui"].src = "../jquery-ui.custom.min.js";
Loading partial jQuery UI
If jQuery UI's widget-factory is already included, but not slider/datepicker, Webshims lib won't load the jquery-ui module, but trys to load the input-widgets module, if a src is specified.
$.webshims.modules["input-widgets"].src = "../jquery-ui.slider-datepicker.min.js";
Performance tip: conditional loading
In case a project only needs to support type="range" the module "jquery-ui" or "input-widgets" do not need to include the datepicker widget (or vice versa). Additionally polyfilling the forms-ext feature can be made conditionally:
$.webshims.modules["jquery-ui"].src = "../jquery-ui.slider-custom.min.js";
//forms-ext feature would also implement datepicker (type=number, type=time, type=date...)
if(!Modernizr.inputtypes.range){
$.webshims.polyfill("forms-ext");
}