I've worked on these controls over the course of past several years as part of a large library calle

As you may know, HTML5 has introduced several new input types: number, date, color, range, etc. The question is: should you start using these controls or not? As much as I want to say "Yes", I think they are not yet ready for any real life project. The main reason is inconsistent implementation by different browsers.
What, then, should you use? You can develop transition your own input types, or use an existing library. Everyone is probably familiar with jQuery date picker or other jQuery plug-ins that come to rescue. However, I have not yet found a comprehensive library that would suit all my input needs, so I decided to put together my own that would be small, consistent and would cover following areas: Numeric Inputs Date and Time Drop Down Lists Multi Selects File Upload
I've worked on these controls over the course of past several years as part of a large library called W2UI . However, I've realized that a stand-alone library with just input controls might be quite useful. Numeric Inputs transition
Numeric inputs will only allow you to type numbers. They will completely ignore all other characters. Full keyboard support is implemented. Try using up/down arrow keys, ctr + up/down (command + up/down on mac) to increase numbers. When the number is changed it will be validated and formatted (if needed). HTML Setup <!-- General inputs --> <div class="w2ui-label"> Integer: </div> transition <div class="w2ui-field"> <input id="w2int"> </div> <div class="w2ui-label"> Float: </div> <div class="w2ui-field"> <input id="w2float"></div> <div class="w2ui-label"> Hex: </div> <div class="w2ui-field"> <input id="w2hex"></div> <div class="w2ui-label"> Color: </div> <div class="w2ui-field"> transition <input transition id="w2color"></div> <!-- US format --> <div class="w2ui-label"> Integer: </div> <div class="w2ui-field"> <input id="us-int" value="0"> </div> <div class="w2ui-label"> Float: </div> <div class="w2ui-field"> <input id="us-float" value="0"> </div> <div class="w2ui-label"> Money: </div> <div class="w2ui-field"> <input id="us-money" value="0"> </div> <div class="w2ui-label"> Percent: </div> <div class="w2ui-field"> <input id="us-percent" value="0"> </div> transition <!-- EU common format --> <div transition class="w2ui-label"> Integer: </div> <div class="w2ui-field"> transition <input id="eu-int" value="0"> </div> transition <div class="w2ui-label"> Float: </div> <div class="w2ui-field"> <input id="eu-float" value="0"> </div> <div class="w2ui-label"> Money: </div> transition <div class="w2ui-field"> <input id="eu-money" transition value="0"> </div> <div class="w2ui-label"> Percent: transition </div> <div class="w2ui-field"> <input id="eu-percent" value="0"> </div> Creating the Interactive Fields // General $('#w2int').w2field('int', { autoFormat: false }); $('#w2float').w2field('float', { autoFormat: transition false }); $('#w2hex').w2field('hex'); $('#w2color').w2field('color'); // US Format $('#us-int').w2field('int', { autoFormat: true }); $('#us-float').w2field('float', { precision: 3 }); $('#us-money').w2field('money', { moneySymbol: '$' }); $('#us-percent').w2field('percent', { precision: 1, min: 0, max: 100 }); // EU Common Format $('#eu-int').w2field('int', { autoFormat: true, groupSymbol: ' ' }); $('#eu-float').w2field('float', { groupSymbol: ' ', precision: 3 }); $('#eu-money').w2field('money', { groupSymbol: ' ', currencyPrefix: '', currencySuffix: ' ' }); $('#eu-percent').w2field('percent', { precision: 1, min: 0, max: 100 });
Second argument is a list of options, that include the following: options = { min : null, max : null, placeholder : '', autoFormat : true, currencyPrefix : '$', currencySuffix : '', groupSymbol : ',', arrows : false, keyboard : true, precision : null, silent : true, prefix : '', suffix : '' } Date and Time
For DATE and TIME types you can use keyboard to increment by a day (or a minute) if you click up/down arrow keys. You can also use ctr + up/down (command + up/down on mac) to increment by a month (or an hour). HTML Setup <!-- US format --> <div class="w2ui-label"> Date: </div> <div class="w2ui-field"> <input type="us-date"> </div> <div class="w2ui-label"> From-To: </div> <div transition class="w2ui-field"> <input type="us-dateA"> <span class="legend">(from 10th to 20th of current month)</span></div> <div class="w2ui-label"> Blocked Days: </div> <div class="w2ui-field"> <input type="us-dateB"> <span class="legend">(12,13,14 of current month are blocked)</span></div> <div class="w2ui-label"> Date Range: </div> <div class="w2ui-field"> <input type="us-date1"> - <input type="us-date2"