Appendix D. Creating decimal, currency, and time pickers with Globalize

In chapter 3 we discussed how to use the jQuery UI spinner widget to transform <input> elements into basic number pickers. Here, we’ll look at more complex usage scenarios of the spinner widget, including how to create decimal, currency, and time pickers.

To make this possible, the spinner widget uses another jQuery project known as Globalize. Globalize is a library that handles the formatting and parsing of various data types—strings, dates, numbers, and the like—in numerous cultures around the world. The spinner widget integrates with Globalize’s formatting and parsing to make these complex widgets possible. Let’s look at how, starting with decimal pickers.

D.1. Building decimal pickers

Keeping track of how various cultures handle something as simple as decimals is tricky because you have to know whether the culture use a period (1.23) or a comma (1,23) to delimit whole numbers from fractional numbers. Let’s assume you want to get a numeric value from a user that has two digits after the decimal mark. You could start with the following approach:

<input id="spinner">
<script>
    $( "#spinner" ).spinner({
        step: 0.01,
        page: 100
    });
</script>

Appendix D. Creating decimal, currency, and time pickers with Globalize

D.1. Building decimal pickers

D.2. Building currency pickers

D.3. Building time pickers