## 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 min:
max:
disabled: readonly:
$.attr list:
data-placeholder:
data-wspopover Properties appendTo:
position (only with jQuery UI position utitliy):
data-month Properties size:
startView:
minView:
restartView: selectNav: showWeek: yearButtons: updateOnInput: monthNames:
monthNamesHead:
cols:
relDefaultValue:
relMax:
relMin:
inlinePicker: openOnFocus: splitInput: monthSelect: jumpInputs (only with splitInput): buttonOnly: calculateWidth: useDecadeBase:
disableDays:
Style Buttons outside: No spinbuttons: No buttons:
$.prop min:
max:
disabled: readonly:
$.attr list:
data-placeholder:
data-wspopover Properties appendTo:
position (with jQuery UI position utitliy):
data-month Properties size:
startView:
minView:
restartView: selectNav: cols:
inlinePicker: updateOnInput: monthNames:
formatMonthNames:
openOnFocus: splitInput: monthSelect: buttonOnly: calculateWidth:
Style Buttons outside: No spinbuttons: No buttons:
$.prop min:
max:
step:
disabled: readonly:
$.attr list:
animate: calculateWidth:
$.prop min:
max:
step:
$.attr data-placeholder:
$.data calculateWidth:
Style Buttons outside: No buttons:
$.prop min:
max:
step:
placeholder:
$.data calculateWidth:
Style Buttons outside: No buttons:

### Simple Demo

* Required fields

alpha color with range:
alpha color with number:
range:
range (with data attribute):
US States: *
date: * (min="2010-12-10" max="2016-01-01")
date (with data attribute): *
E-Mail + datalist: *
number: * (min="3")
time: