cyrus-d
cyrus-d

Reputation: 823

JQuery UI is not compatible with Globalize 1.x

I am having a problem using globalize.js 1.x with jQuery UI spinner.

I would like to display appropriate currency symbol next to the number in spinner. But I am getting the error from following two functions:

Globalize.format
Globalize.parseFloat

Apparently, these two function is not available in Globalize 1.x. instead, they have introduced new functions:

.parseNumber( value [, options])
.formatNumber( value [, options] )
.formatCurrency( value, currency [, options] )
.formatDate( value, pattern )

I have tried to use these function in jQuery UI source code, but it has broken spinner altogether.

Any idea how to solve this problem?

I am using:

jQuery UI - v1.12.1 Globalize v1.3.0

Upvotes: 0

Views: 456

Answers (1)

cyrus-d
cyrus-d

Reputation: 823

If you have a similar problem do as follow:

1.Add Globalize to your app, I have followed the following tutorial and helped a lot:

https://js.devexpress.com/Documentation/Guide/Widgets/Common/UI_Widgets/Localization_-_Use_Globalize/

2.Add jquery UI to your project.

3.Create new javascript file and place it after jquery UI file.

4.add following script to the new js file:

$(function ($) {
    $.ui.spinner.prototype._parse = function(val) {
    if (typeof val === "string" && val !== "") {
        val = val.match(/([0-9,.]+)/)[0];
        if (window.Globalize && this.options.numberFormat) {
            val = Globalize(this.options.culture).parseNumber(val);
        } else 
            val = (+val);
    }
    return val === "" || isNaN(val) ? null : val;
    };
    $.ui.spinner.prototype._format = function (value) {
        if (value === "") {
            return "";
        }
        if (window.Globalize && this.options.numberFormat) {
            var formatter = null;
            if (this.options.numberFormat === 'n' || this.options.numberFormat.match('^[n][0-9]')) {
                var fractionDigits = this.options.numberFormat.replace(/^\D+/g, '');
                if (fractionDigits) {
                    formatter = Globalize.numberFormatter({ minimumFractionDigits: fractionDigits });
                } else
                    return value;
            } else if (this.options.numberFormat === "c" || this.options.numberFormat.length === 3) {
                var currencyCode = this.options.numberFormat;
                 if (currencyCode.length !== 3)
                    currencyCode = 'GBP';
                if (currencyCode.length !== 3)
                    return value;
                formatter = Globalize.currencyFormatter(currencyCode);
            }
            return formatter(value);
        }
        else
            return value;
    }
}(jQuery));

Hope it helps.

Upvotes: 0

Related Questions