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 locales for widgets
$.webshims.activeLang('en');
$.webshims.activeLang('de');
Changing default-options for widgets
All widgets can be changed with the forms-ext.widgets
or forms-ext[type]
options.
$.webshims.setOptions({
wspopover: {
appendTo: 'element' //insert all popovers (datepicker, validationBubble, datalist after the associated element instead of the body)
}
});
$.webshims.setOptions('forms-ext', {
widgets: {
calculateWidth: false
},
date: {
splitInput: true
},
month: {
calculateWidth: true
}
});