JQuery UI Spinner does not show dollar sign with currency symbol

Question

I am using jQuery UI 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 counter works fine, except for one. Even if I define numberFormat as "C" (currency), it does not show the dollar sign as demo . The spinner himself appears, I can rotate it up and down, and he follows the specified maximum and min., But not the dollar sign. I tried putting the dollar sign in the value in the HTML text box, as well as the jQuery UI start parameter, but not the cube.

I thought this might be due to the function that I assigned to the spin event ( updateAmounts , as you can see above), but deleting this event handler did not change anything. I also tried to make the text field as simple as possible (removed the style and maxlength attribute that I had on it), but not the cube. I worked a bit on this, but I couldn't think of anything, partly because the counter is new, and partly because the words "dollar sign" confuse things that using jQuery. Here's the HTML for the text field:

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

I am using jQuery UI version 1.9.0 and jQuery 1.8.2.

Answer 1

You need the specified culture, and you also need to enable the Globalize library.

Link to the appropriate culture that you use in your application, and specify it in your code and add a link to the globalise.js file.

Example link 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);