Webshims Lib

Polyfill only the incapable browsers

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 } });
$.prop
$.attr
data-wspopover Properties
data-month Properties
Style
$.prop
$.attr
data-wspopover Properties
data-month Properties
Style
$.prop
$.attr
$.prop
$.attr
$.data
Style
$.prop
$.data
Style

Simple Demo

* Required fields

(min="2010-12-10" max="2016-01-01")
(min="3")