jQuery UI Spinner doesn't show dollar sign with currency designation

Question

I am using jQuery UI's new spinner widget. Here is the init/config:

$(function() {
    $("#amount").spinner({ min: min, max: max, step: 10, start: 10, numberFormat: "C", spin: updateAmounts }).change(updateAmounts);
)};
//min=5; max=500

The spinner works fine, except for one thing. Even though I define numberFormat as "C" (currency), it does not show a dollar sign like the demo does. The spinner itself shows up, I can spin it up and down and it follows the specified max and min, but no dollar sign. I tried putting a dollar sign in the value in the HTML textbox as well as the jQuery UI start option, but no dice.

I thought it might be because of the function I assigned to the spin event (updateAmounts, as you can see above), but removing that event handler changed nothing. I also tried making the textbox itself as basic as possible (removed a style and maxlength attribute I had on it), but no dice. I've done some searching on this, but I couldn't come up with anything, partially because the spinner is new, and partially because the words "dollar sign" confuse things, what with jQuery's use of it. Here's the HTML code for the textbox:

<input id="amount" name="amount" value="10" maxlength="4">

I'm using jQuery UI version 1.9.0 and jQuery 1.8.2.

Answer 1

You need a culture specified and also need to include the Globalize library.

Link to the appropriate culture you're using in your app and specify it in your code and add a reference to the globalise.js file.

The example links to <script src="/resources/demos/external/globalize.js"></script>

$("#amount").spinner({ culture: "en-US", min: min, max: max, step: 10, start: 10, numberFormat: "C", spin: updateAmounts }).change(updateAmounts);