DevExtreme jQuery/JS - Value Formatting

You can change value formatting in DevExtreme applications in two ways:

Set a UI component's format property to display formatted values in editors, grids, and other components.
Use the localization API to format and parse values programmatically in code.

Format patterns are locale-independent initially. To apply locale-aware formatting rules, use Intl or Globalize.

Using Intl

Intl is the ECMAScript Internationalization API. DevExtreme supports Intl for locale-aware number, date, and currency formatting out of the box.

Configure locale and message dictionaries in the UI Text Localization section. This topic focuses on Intl-based value formatting.

View Demo

Use defaultCurrency to set a global currency. Use format.currency in an individual UI component to override that value.

jQuery

JavaScript

$(function() {
    DevExpress.config({ defaultCurrency: "EUR" });

    $("#dataGridContainer").dxDataGrid({
        // ...
        columns: [{
            dataField: "SaleAmount",
            format: {
                type: "currency",
                currency: "USD"
            }
        }]
    });
});

Angular

app.component.ts

app.component.html

import { Component } from '@angular/core';
import { DxDataGridModule } from 'devextreme-angular';
import config from 'devextreme/core/config';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    standalone: true,
    imports: [DxDataGridModule]
})
export class AppComponent {
    constructor() {
        config({ defaultCurrency: 'EUR' });
    }
}

<dx-data-grid ... >
    <dxi-data-grid-column dataField="SaleAmount">
        <dxo-data-grid-format
            type="currency"
            currency="USD">
        </dxo-data-grid-format>
    </dxi-data-grid-column>
</dx-data-grid>

Vue

App.vue

<template>
    <DxDataGrid ... >
        <DxColumn data-field="SaleAmount">
            <DxFormat
                type="currency"
                currency="USD"
            />
        </DxColumn>
    </DxDataGrid>
</template>

<script setup lang="ts">
import 'devextreme/dist/css/dx.fluent.blue.light.css';
import config from 'devextreme/core/config';
import DxDataGrid, { DxColumn, DxFormat } from 'devextreme-vue/data-grid';

config({ defaultCurrency: 'EUR' });
</script>

React

App.tsx

import config from 'devextreme/core/config';
import 'devextreme/dist/css/dx.fluent.blue.light.css';
import DataGrid, { Column, Format } from 'devextreme-react/data-grid';

config({ defaultCurrency: 'EUR' });

export default function App() {
    return (
        <DataGrid ... >
            <Column dataField="SaleAmount">
                <Format
                    type="currency"
                    currency="USD"
                />
            </Column>
        </DataGrid>
    );
}

You can apply Intl option objects directly to the format property. Refer to Intl Formats for details and additional examples.

Using Globalize

IMPORTANT

The Globalize package is outdated and potentially unsafe.

Use Globalize at your own risk. We recommend switching to Intl for a more secure solution.

NOTE

We recommend against using Globalize if you apply CSP rules. Use Intl instead.

The following libraries and data are required to activate Globalize in your project:

Globalize library
CLDR library
CLDR data

jQuery

Specify the Globalize and CLDR libraries using <script> tags as shown below. In this example, the German dictionary is included. Include libraries in the order shown. Then, set the locale using the Globalize.locale() method:

HTML

<head>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <!-- ... -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.5.0/cldr.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.5.0/cldr/event.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.5.0/cldr/supplemental.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.3.0/globalize.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.3.0/globalize/message.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.3.0/globalize/number.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.3.0/globalize/currency.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.3.0/globalize/date.min.js"></script>
    <!-- DevExtreme library -->
    <script src="https://cdn3.devexpress.com/jslib/26.1.3/js/dx.all.js"></script>
    <!-- Dictionary files for German language -->
    <script src="https://cdn3.devexpress.com/jslib/26.1.3/js/localization/dx.messages.de.js"></script>
    <!-- Common and language-specific CLDR data -->
    <script src="https://unpkg.com/devextreme-cldr-data/supplemental.js"></script>
    <script src="https://unpkg.com/devextreme-cldr-data/de.js"></script>
</head>
<script>
    $(function() {
        Globalize.locale(navigator.language);
    });
</script>

Angular

Install devextreme-cldr-data and globalize packages:

Code

npm install --save-dev devextreme-cldr-data globalize

Register Globalize in your project as described in the following help topic: Globalize Registration.

TypeScript

import "devextreme/localization/globalize/number";
import "devextreme/localization/globalize/date";
import "devextreme/localization/globalize/currency";
import "devextreme/localization/globalize/message";

import deMessages from "devextreme/localization/messages/de.json";
import supplemental from "devextreme-cldr-data/supplemental.json";
import deCldrData from "devextreme-cldr-data/de.json";
import Globalize from "globalize";

export class AppComponent {
    constructor() {
        Globalize.load(supplemental, deCldrData);
        Globalize.loadMessages(deMessages);
        Globalize.locale(navigator.language);
    }
}

Vue

Install devextreme-cldr-data and globalize packages:

Code

npm install --save-dev devextreme-cldr-data globalize

Register Globalize in your project as described in the following help topic: Globalize Registration.

TypeScript

import "devextreme/localization/globalize/number";
import "devextreme/localization/globalize/date";
import "devextreme/localization/globalize/currency";
import "devextreme/localization/globalize/message";

import deMessages from "devextreme/localization/messages/de.json";
import supplemental from "devextreme-cldr-data/supplemental.json";
import deCldrData from "devextreme-cldr-data/de.json";
import Globalize from "globalize";

Globalize.load(supplemental, deCldrData);
Globalize.loadMessages(deMessages);
Globalize.locale(navigator.language);

React

Install devextreme-cldr-data and globalize packages:

Code

npm install --save-dev devextreme-cldr-data globalize

Register Globalize in your project as described in the following help topic: Additional Configuration for Webpack.

TypeScript

import "devextreme/localization/globalize/number";
import "devextreme/localization/globalize/date";
import "devextreme/localization/globalize/currency";
import "devextreme/localization/globalize/message";

import deMessages from "devextreme/localization/messages/de.json";
import supplemental from "devextreme-cldr-data/supplemental.json";
import deCldrData from "devextreme-cldr-data/de.json";
import Globalize from "globalize";

Globalize.load(supplemental, deCldrData);
Globalize.loadMessages(deMessages);
Globalize.locale(navigator.language);

Apply the format.type property to format and localize strings, numbers, dates, and currencies automatically according to a locale.

You can also format values using structures accepted by numberFormatter, currencyFormatter, and dateFormatter, for example:

jQuery

JavaScript

$(function() {
    $("#dataGridContainer").dxDataGrid({
        // ...
        columns: [{
            dataField: "OrderDate",
            format: { skeleton: "yMMMd" }
        }, {
            dataField: "SaleAmount",
            format: { currency: "EUR", maximumFractionDigits: 2 }
        }]
    });
});

Angular

app.component.html

app.component.ts

<dx-data-grid ... >
    <dxi-data-grid-column
        dataField="OrderDate"
        [format]="{ skeleton: 'yMMMd' }">
    </dxi-data-grid-column>
    <dxi-data-grid-column
        dataField="SaleAmount"
        [format]="{ currency: 'EUR', maximumFractionDigits: 2 }">
    </dxi-data-grid-column>
</dx-data-grid>

import { Component } from '@angular/core';
import { DxDataGridModule } from 'devextreme-angular';
// ...
// import dictionaries and localization modules here

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    standalone: true,
    imports: [DxDataGridModule]
})
export class AppComponent {
    // ...
}

Vue

App.vue

<template>
    <DxDataGrid ... >
        <DxColumn
            data-field="OrderDate"
            :format="{ skeleton: 'yMMMd' }"
        />
        <DxColumn
            data-field="SaleAmount"
            :format="{ currency: 'EUR', maximumFractionDigits: 2 }"
        />
    </DxDataGrid>
</template>

<script setup lang="ts">
import 'devextreme/dist/css/dx.fluent.blue.light.css';
// ...
// import dictionaries and localization modules here

import DxDataGrid, { DxColumn } from 'devextreme-vue/data-grid';
</script>

React

App.tsx

import React from 'react';
import 'devextreme/dist/css/dx.fluent.blue.light.css';
// ...
// import dictionaries and localization modules here

import DataGrid, { Column } from 'devextreme-react/data-grid';

export default function App() {
    return (
        <DataGrid ... >
            <Column
                dataField="SaleAmount"
                format={{ currency: 'EUR', maximumFractionDigits: 2 }}
            />
        </DataGrid>
    );
}

Format UI Component Values

Predefined Formats

Predefined formats are string literals for formatting numbers and dates. See the format.type description for a full list.

Set the format UI component property to apply a predefined format. In the following examples, this property formats the SaleAmount column value in the DataGrid. The precision value of 2 displays two digits after the decimal separator.

jQuery

JavaScript

$(function() {
    $("#dataGridContainer").dxDataGrid({
        dataSource: [{
            ID: 1,
            SaleAmount: 1234.567
        }],
        keyExpr: "ID",
        columns: [{
            dataField: "SaleAmount",
            format: {
                type: "fixedPoint",
                precision: 2
            }
        }]
    });
});

Angular

app.component.html

app.component.ts

<dx-data-grid [dataSource]="orders" keyExpr="ID">
    <dxi-data-grid-column dataField="SaleAmount">
        <dxo-data-grid-format
            type="fixedPoint"
            [precision]="2">
        </dxo-data-grid-format>
    </dxi-data-grid-column>
</dx-data-grid>

import { Component } from '@angular/core';
import { DxDataGridModule } from 'devextreme-angular';

type Order = {
    ID: number;
    SaleAmount: number;
};

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    standalone: true,
    imports: [DxDataGridModule]
})
export class AppComponent {
    orders: Order[] = [{
        ID: 1,
        SaleAmount: 1234.567
    }];
}

Vue

App.vue

<template>
    <DxDataGrid :data-source="orders" key-expr="ID">
        <DxColumn data-field="SaleAmount">
            <DxFormat
                type="fixedPoint"
                :precision="2"
            />
        </DxColumn>
    </DxDataGrid>
</template>

<script setup lang="ts">
import 'devextreme/dist/css/dx.fluent.blue.light.css';
import DxDataGrid, { DxColumn, DxFormat } from 'devextreme-vue/data-grid';

type Order = {
    ID: number;
    SaleAmount: number;
};

const orders: Order[] = [{
    ID: 1,
    SaleAmount: 1234.567
}];
</script>

React

App.tsx

import 'devextreme/dist/css/dx.fluent.blue.light.css';
import DataGrid, { Column, Format } from 'devextreme-react/data-grid';

type Order = {
    ID: number;
    SaleAmount: number;
};

const orders: Order[] = [{
    ID: 1,
    SaleAmount: 1234.567
}];

export default function App() {
    return (
        <DataGrid dataSource={orders} keyExpr="ID">
            <Column dataField="SaleAmount">
                <Format
                    type="fixedPoint"
                    precision={2}
                />
            </Column>
        </DataGrid>
    );
}

The previous example assigns an object to the format property that in turn allows you to specify the precision value. You can assign a string literal to this format property if additional options are not required.

View Demo

Intl Formats

Intl is the ECMAScript Internationalization API. DevExtreme supports Intl value formatting out of the box.

The UI component format property is compatible with options objects accepted by Intl.NumberFormat and Intl.DateTimeFormat. To apply an Intl format, assign these option fields to the format property:

jQuery

index.js

$(function() {
    $("#dataGridContainer").dxDataGrid({
        // ...
        columns: [{
            dataField: "OrderDate",
            format: { year: "2-digit", month: "narrow", day: "2-digit" }
        }, {
            dataField: "SaleAmount",
            format: { style: "currency", currency: "EUR", useGrouping: true, minimumSignificantDigits: 3 }
        }]
    });
});

Angular

app.component.html

app.component.ts

<dx-data-grid [dataSource]="orders" keyExpr="ID">
    <dxi-data-grid-column
        dataField="OrderDate"
        [format]="orderDateFormat">
    </dxi-data-grid-column>
    <dxi-data-grid-column
        dataField="SaleAmount"
        [format]="saleAmountFormat">
    </dxi-data-grid-column>
</dx-data-grid>

import { Component } from '@angular/core';
import { DxDataGridModule } from 'devextreme-angular';

type Order = {
    ID: number;
    OrderDate: Date;
    SaleAmount: number;
};

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    standalone: true,
    imports: [DxDataGridModule]
})
export class AppComponent {
    orders: Order[] = [{
        ID: 1,
        OrderDate: new Date(2021, 6, 15),
        SaleAmount: 1234.567
    }];

    orderDateFormat = { year: '2-digit', month: 'narrow', day: '2-digit' };
    saleAmountFormat = { style: 'currency', currency: 'EUR', useGrouping: true, minimumSignificantDigits: 3 };
}

Vue

App.vue

<template>
    <DxDataGrid :data-source="orders" key-expr="ID">
        <DxColumn
            data-field="OrderDate"
            :format="orderDateFormat"
        />
        <DxColumn
            data-field="SaleAmount"
            :format="saleAmountFormat"
        />
    </DxDataGrid>
</template>

<script setup lang="ts">
import 'devextreme/dist/css/dx.fluent.blue.light.css';
import DxDataGrid, { DxColumn } from 'devextreme-vue/data-grid';

type Order = {
    ID: number;
    OrderDate: Date;
    SaleAmount: number;
};

const orders: Order[] = [{
    ID: 1,
    OrderDate: new Date(2021, 6, 15),
    SaleAmount: 1234.567
}];

const orderDateFormat = { year: '2-digit', month: 'narrow', day: '2-digit' };
const saleAmountFormat = { style: 'currency', currency: 'EUR', useGrouping: true, minimumSignificantDigits: 3 };
</script>

React

App.tsx

import 'devextreme/dist/css/dx.fluent.blue.light.css';
import DataGrid, { Column } from 'devextreme-react/data-grid';

type Order = {
    ID: number;
    OrderDate: Date;
    SaleAmount: number;
};

const orders: Order[] = [{
    ID: 1,
    OrderDate: new Date(2021, 6, 15),
    SaleAmount: 1234.567
}];

const orderDateFormat = { year: '2-digit', month: 'narrow', day: '2-digit' };
const saleAmountFormat = { style: 'currency', currency: 'EUR', useGrouping: true, minimumSignificantDigits: 3 };

export default function App() {
    return (
        <DataGrid dataSource={orders} keyExpr="ID">
            <Column
                dataField="OrderDate"
                format={orderDateFormat}
            />
            <Column
                dataField="SaleAmount"
                format={saleAmountFormat}
            />
        </DataGrid>
    );
}

Custom Format String

Use Unicode Locale Data Markup Language (LDML) patterns to specify a custom format string. An LDML pattern consists of wildcard and literal characters. The format property supports the following wildcard characters:

Numeric Formats

Format character	Description
0	A digit. Displays '0' if the formatted number does not have a digit in that position.
#	Any number of leading digits, a single digit, or nothing. If this character goes first in the format string, it can match multiple leading digits (before the decimal point). Subsequent characters match a single digit. If the formatted number does not have a digit in the corresponding position, it displays nothing. For example, if you format "123.45" with "#0.#", the result is "123.5".
.	A decimal separator. Actual character depends on locale.
,	A group separator. Actual character depends on locale.
%	The percent sign. Multiplies the input value by 100.
;	Separates positive and negative format patterns. For example, the "#0.##;(#0.##)" format displays a positive number according to the pattern before the semicolon (";"), and a negative number according to the pattern after the semicolon (";"). If you do not use this character , nor the additional pattern, negative numbers display a minus ("-") prefix.
Escape characters	You can display the special characters above as literals if you enclose them in single quotation marks. For example, '%'.
Other characters	You can add any literal characters to the beginning or end of the format string.

The examples below demonstrate how # and 0 behave in fractional numbers:

JavaScript

const number = 1234.567;

// Leave the first digit before the decimal point and round up the decimal
format: "0.0" // 4.6

const smallNumber = 0.1234;

// Display nothing in place of a digit
format: "#.#" // .1

const largeNumber = 123456.789;

// Add a group separator
format: ",##0.###" // 123,456.789

The examples below demonstrate different options used to apply percentage formatting to decimals. Use caution if your format string starts with 0 because the formatted number may lose leading digits.

JavaScript

const smallNumber = 0.01234;

// Represent as a percentage and limit to two decimal digits
format: "#0.##%" // 1.23%

// Add a percent sign and limit to two decimal digits
format: "#0.##'%'" // 0.01%

Date-Time Formats

Format character	Description
y	A calendar year.
Q	A quarter number or name. Available combinations with example: "Q" - "2", "QQ" - "02", "QQQ" - "Q2" and "QQQQ" - "2nd quarter".
M	A month number or name. Available combinations with example: "M" - "9", "MM" - "09", "MMM" - "Sep", "MMMM" - "September", "MMMMM" - "S".
d	A month day.
E	A week day name. Available combinations with example: "E", "EE" or "EEE" - "Tue", "EEEE" - "Tuesday", "EEEEE" - "T".
a	A day period (am or pm).
h	An hour. From 1 to 12.
H	An hour. From 0 to 23.
m	A minute.
s	A second.
S	A fractional second.
'' (two single quotes)	Literal text. Text enclosed in two single quotes is shown as-is.

JavaScript

const date = new Date(2021, 6, 15, 20, 45, 34);

format: "MM/dd/yyyy" // 07/15/2021
format: "MM/dd/yy" // 07/15/21
format: "dd.MM.yyyy" // 15.07.2021
format: "MMMM dd, yyyy" // July 15, 2021
format: "EEEE, MMMM dd" // Thursday, July 15
format: "HH:mm:ss" // 20:45:34
format: "hh:mm a" // 08:45 PM
format: "MMMM dd, yyyy HH:mm:ss" // July 15, 2021 20:45:34

NOTE

Use the Globalize library in your application to use additional numeric or date-time format characters.

Custom Function

A custom function is useful when advanced formatting is required. The value to be formatted is passed to the function as an argument. In the following example, a custom function formats a DataGrid column value as an absolute value and a percentage of the maximum sale amount.

jQuery

JavaScript

$(function() {
    const orders = [{
        ID: 1,
        SaleAmount: 6
    }, {
        ID: 2,
        SaleAmount: 8.5
    }, {
        ID: 3,
        SaleAmount: 10
    }];

    const maxSaleAmount = Math.max(...orders.map((item) => item.SaleAmount));

    $("#dataGridContainer").dxDataGrid({
        dataSource: orders,
        keyExpr: "ID",
        columns: [{
            dataField: "SaleAmount",
            format: function (value) {
                return value + " | " + ((value / maxSaleAmount) * 100).toFixed(1) + "%";
            }
        }]
    });
});

Angular

app.component.html

app.component.ts

<dx-data-grid [dataSource]="orders" keyExpr="ID">
    <dxi-data-grid-column
        dataField="SaleAmount"
        [format]="formatSaleAmount">
    </dxi-data-grid-column>
</dx-data-grid>

import { Component } from '@angular/core';
import { DxDataGridModule } from 'devextreme-angular';

type Order = {
    ID: number;
    SaleAmount: number;
};

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    standalone: true,
    imports: [DxDataGridModule]
})
export class AppComponent {
    orders: Order[] = [{
        ID: 1,
        SaleAmount: 6
    }, {
        ID: 2,
        SaleAmount: 8.5
    }, {
        ID: 3,
        SaleAmount: 10
    }];

    maxSaleAmount = Math.max(...this.orders.map((item) => item.SaleAmount));

    formatSaleAmount = (value: number): string => {
        return `${value} | ${((value / this.maxSaleAmount) * 100).toFixed(1)}%`;
    };
}

Vue

App.vue

<template>
    <DxDataGrid :data-source="orders" key-expr="ID">
        <DxColumn
            data-field="SaleAmount"
            :format="formatSaleAmount"
        />
    </DxDataGrid>
</template>

<script setup lang="ts">
import 'devextreme/dist/css/dx.fluent.blue.light.css';
import DxDataGrid, { DxColumn } from 'devextreme-vue/data-grid';

type Order = {
    ID: number;
    SaleAmount: number;
};

const orders: Order[] = [{
    ID: 1,
    SaleAmount: 6
}, {
    ID: 2,
    SaleAmount: 8.5
}, {
    ID: 3,
    SaleAmount: 10
}];

const maxSaleAmount = Math.max(...orders.map((item) => item.SaleAmount));

const formatSaleAmount = (value: number): string => {
    return `${value} | ${((value / maxSaleAmount) * 100).toFixed(1)}%`;
};
</script>

React

App.tsx

import 'devextreme/dist/css/dx.fluent.blue.light.css';
import DataGrid, { Column } from 'devextreme-react/data-grid';
import { useCallback } from 'react';

type Order = {
    ID: number;
    SaleAmount: number;
};

const orders: Order[] = [{
    ID: 1,
    SaleAmount: 6
}, {
    ID: 2,
    SaleAmount: 8.5
}, {
    ID: 3,
    SaleAmount: 10
}];

const maxSaleAmount = Math.max(...orders.map((item) => item.SaleAmount));

export default function App() {
    const formatSaleAmount = useCallback((value: number): string => {
        return `${value} | ${((value / maxSaleAmount) * 100).toFixed(1)}%`;
    }, []);

    return (
        <DataGrid dataSource={orders} keyExpr="ID">
            <Column
                dataField="SaleAmount"
                format={formatSaleAmount}
            />
        </DataGrid>
    );
}

Format and Parse Dates and Numbers

DevExtreme includes an API that formats and parses dates and numbers. The following example demonstrates date and number formatting and parsing.

The formatDate() method applies a predefined format to a date. You can also use a custom function or format string. The output is a string. Use parseDate() to convert the string back to a Date.

Use formatNumber() and parseNumber() to format and parse numbers and currency values.

jQuery

JavaScript

HTML

$(function() {
    let date = new Date();
    let amount = 1234.56;
    $("#dateInput").val(DevExpress.localization.formatDate(date, "shortDate"));
    $("#numberInput").val(DevExpress.localization.formatNumber(amount, "currency"));
    $("#dateInput").change(function(event) {
        date = DevExpress.localization.parseDate(event.target.value, "shortDate");
    });
    $("#numberInput").change(function(event) {
        amount = DevExpress.localization.parseNumber(event.target.value, "currency");
    });
});

<input id="dateInput"/>
<input id="numberInput"/>

Angular

TypeScript

HTML

import { formatDate, formatNumber, parseDate, parseNumber } from "devextreme/localization";
// ...
export class AppComponent {
    _date: Date = new Date();
    _amount: number = 1234.56;
    get date() {
        return formatDate(this._date, "shortDate");
    }
    set date(value) {
        this._date = parseDate(value, "shortDate");
    }
    get amount() {
        return formatNumber(this._amount, "currency");
    }
    set amount(value) {
        this._amount = parseNumber(value, "currency");
    }
}

<input 
    [value]="date"
    (change)="date = $event.target.value"
/>
<input 
    [value]="amount"
    (change)="amount = $event.target.value"
/>

Vue

App.vue

<template>
    <input
        :value="date"
        @change="date = $event.target.value"
    />
    <input
        :value="amount"
        @change="amount = $event.target.value"
    />
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import { formatDate, formatNumber, parseDate, parseNumber } from 'devextreme/localization';

const sourceDate = ref<Date>(new Date());
const sourceAmount = ref<number>(1234.56);

const date = computed<string>({
    get() {
        return formatDate(sourceDate.value, 'shortDate');
    },
    set(value: string) {
        const parsedDate = parseDate(value, 'shortDate');
        if (parsedDate instanceof Date) {
            sourceDate.value = parsedDate;
        }
    }
});

const amount = computed<string>({
    get() {
        return formatNumber(sourceAmount.value, 'currency');
    },
    set(value: string) {
        sourceAmount.value = parseNumber(value, 'currency');
    }
});
</script>

React

App.js

import React, { useState, useCallback } from "react";
import { formatDate, formatNumber, parseDate, parseNumber } from "devextreme/localization";

export default function App() {
    const [date, setDate] = useState(new Date());
    const [amount, setAmount] = useState(1234.56);
    const getFormattedDate = useCallback(() => {
        return formatDate(date, "shortDate")
    }, [date]);
    const getFormattedAmount = useCallback(() => {
        return formatNumber(amount, "currency")
    }, [amount]);
    const setParsedDate = useCallback((event) => {
        setDate(parseDate(event.target.value, "shortDate"));
    }, []);
    const setParsedAmount = useCallback((event) => {
        setAmount(parseNumber(event.target.value, "currency"));
    }, []);

    return (
        <>
            <input
                defaultValue={getFormattedDate()}
                onChange={setParsedDate}
            />
            <input
                defaultValue={getFormattedAmount()}
                onChange={setParsedAmount}
            />
        </>
    );
}

DevExtreme jQuery/JS - Value Formatting

Using Intl

jQuery

Angular

Vue

React

Using Globalize

jQuery

Angular

Vue

React

jQuery

Angular

Vue

React

Format UI Component Values

Predefined Formats

jQuery

Angular

Vue

React

Intl Formats

jQuery

Angular

Vue

React

Custom Format String

Custom Function

jQuery

Angular

Vue

React

Format and Parse Dates and Numbers

jQuery

Angular

Vue

React

How can we improve this page? Select one or more answers