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 code, this property specifies the format and precision of the tooltip's value in the Slider UI component. The value contains two decimal digits when the precision value is 2.
jQuery
$(function() { $("#sliderContainer").dxSlider({ min: 0, max: 10, value: 6, step: 0.01, tooltip: { enabled: true, format: { type: "fixedPoint", precision: 2 } } }); });
Angular
<dx-slider [min]="0" [max]="10" [(value)]="sliderValue" [step]="0.01"> <dxo-tooltip [enabled]="true"> <dxo-format type="fixedPoint" [precision]="2"> </dxo-format> </dxo-tooltip> </dx-slider>
import { DxSliderModule } from "devextreme-angular"; // ... export class AppComponent { sliderValue: number = 6; } @NgModule({ imports: [ // ... DxSliderModule ], // ... })
Vue
<template> <DxSlider :min="0" :max="10" v-model:value="sliderValue" :step="0.01"> <DxTooltip :enabled="true"> <DxFormat type="fixedPoint" :precision="2" /> </DxTooltip> </DxSlider> </template> <script> import 'devextreme/dist/css/dx.light.css'; import DxSlider, { DxTooltip, DxFormat } from 'devextreme-vue/slider'; export default { components: { DxSlider, DxTooltip, DxFormat }, data() { return { sliderValue: 6 } } } </script>
React
import React from 'react'; import 'devextreme/dist/css/dx.light.css'; import Slider, { Tooltip, Format } from 'devextreme-react/slider'; export default function App() { return ( <Slider min={0} max={10} defaultValue={6} step={0.01}> <Tooltip enabled> <Format type="fixedPoint" precision={2} /> </Tooltip> </Slider> ); }
The format property in the previous example is specified with an object which allows you to specify the precision. However, you can specify the format property with a string literal if this is not required.
See Also
Intl Formats
Intl is the short name used to refer to a particular ECMAScript Internationalization API object. DevExtreme supports this API and its value formatting capabilities out of the box.
A UI component's format property is compatible with the options
parameter of the Intl.NumberFormat and Intl.DateTimeFormat. To apply an Intl format, specify the options
parameter's fields in the format property:
jQuery
$(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
<dx-data-grid ... > <dxi-column dataField="OrderDate" [format]="{ year: '2-digit', month: 'narrow', day: '2-digit' }"> </dxi-column> <dxi-column dataField="SaleAmount" [format]="{ style: 'currency', currency: 'EUR', useGrouping: true, minimumSignificantDigits: 3 }"> </dxi-column> </dx-data-grid>
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { DxDataGridModule } from 'devextreme-angular'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, DxDataGridModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
Vue
<template> <DxDataGrid ... > <DxColumn data-field="OrderDate" :format="orderDateFormat" /> <DxColumn data-field="SaleAmount" :format="saleAmountFormat"> /> </DxDataGrid> </template> <script> import 'devextreme/dist/css/dx.light.css'; import DxDataGrid, { DxColumn } from 'devextreme-vue/data-grid'; export default { components: { DxDataGrid, DxColumn }, data() { return { orderDateFormat: { year: '2-digit', month: 'narrow', day: '2-digit' }, saleAmountFormat: { style: 'currency', currency: 'EUR', useGrouping: true, minimumSignificantDigits: 3 } } }, } </script>
React
import React from 'react'; import 'devextreme/dist/css/dx.light.css'; import DataGrid, { Column } from 'devextreme-react/data-grid'; class App extends React.Component { orderDateFormat = { year: '2-digit', month: 'narrow', day: '2-digit' }; saleAmountFormat = { style: 'currency', currency: 'EUR', useGrouping: true, minimumSignificantDigits: 3 }; render() { return ( <DataGrid ... > <Column dataField="OrderDate" format={this.orderDateFormat} /> <Column dataField="SaleAmount" format={this.saleAmountFormat} /> </DataGrid> ); } } export default App;
Custom Format String
Use Unicode Locale Data Markup Language (LDML) patterns to specify a custom format string. An LDML pattern consists of wildcard characters and characters displayed as is. 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 apply format "#0.#" to "123.45", 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 and 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 the behavior of "#" and "0" in fractional numbers:
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 show different ways to apply percentage formatting to decimals. Use caution if your format string starts with a zero ('0'), because the formatted number may lose leading digits.
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. |
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
See Also
Custom Function
A custom function is useful when advanced formatting is required. The value to be formatted is passed to the function as the argument. In the following example, a custom function combines absolute and percentage values for the Slider UI component's tooltip:
jQuery
$(function() { var sliderMaxValue = 10; $("#sliderContainer").dxSlider({ min: 0, max: sliderMaxValue, value: 6, step: 0.01, tooltip: { enabled: true, format: function (value) { return value + " | " + ((value / sliderMaxValue) * 100).toFixed(1) + "%"; } } }); });
Angular
<dx-slider [min]="0" [max]="sliderMaxValue" [(value)]="sliderValue" [step]="0.01"> <dxo-tooltip [enabled]="true" [format]="formatSliderTooltip"> </dxo-tooltip> </dx-slider>
import { DxSliderModule } from "devextreme-angular"; // ... export class AppComponent { sliderValue = 6; sliderMaxValue = 10; formatSliderTooltip (value) { return value + " | " + ((value / this.sliderMaxValue) * 100).toFixed(1) + "%"; } } @NgModule({ imports: [ // ... DxSliderModule ], // ... })
Vue
<template> <DxSlider :min="0" v-model:max="sliderMaxValue" v-model:value="sliderValue" :step="0.01"> <DxTooltip :enabled="true" :format="formatSliderTooltip" /> </DxSlider> </template> <script> import 'devextreme/dist/css/dx.light.css'; import DxSlider, { DxTooltip } from 'devextreme-vue/slider'; export default { components: { DxSlider, DxTooltip }, data() { return { sliderValue: 6, sliderMaxValue: 10 } }, methods: { formatSliderTooltip(value) { return value + " | " + ((value / this.sliderMaxValue) * 100).toFixed(1) + "%"; } } } </script>
React
import React, { useCallback } from 'react'; import 'devextreme/dist/css/dx.light.css'; import Slider, { Tooltip } from 'devextreme-react/slider'; export default function App() { const sliderMaxValue = 10; const formatSliderTooltip = useCallback((value) => { return value + " | " + ((value / sliderMaxValue) * 100).toFixed(1) + "%"; }, []); return ( <Slider min={0} max={sliderMaxValue} defaultValue={6} step={0.01}> <Tooltip enabled format={formatSliderTooltip} /> </Slider> ); }
Format Custom Values
DevExtreme provides an API for formatting any date or number in your app. The following example shows how to format dates. The formatDate() method applies a predefined format to a date. A custom function or format string can be applied instead. The result is a string. This string is then converted back to a date using the parseDate() method.
jQuery
$(function() { var date = new Date(); $("#dateInput").val(DevExpress.localization.formatDate(date, "shortDate")); $("#dateInput").change(function(event) { date = DevExpress.localization.parseDate(event.target.value, "shortDate"); }); });
<input id="dateInput"/>
Angular
import { formatDate, parseDate } from "devextreme/localization"; // ... export class AppComponent { _date: Date = new Date(); get date() { return formatDate(this._date, "shortDate"); } set date(value) { this._date = parseDate(value, "shortDate"); } }
<input [value]="date" (change)="date = $event.target.value" />
Vue
<template> <input :value="date" @change="date = $event.target.value" /> </template> <script> import { formatDate, parseDate } from 'devextreme/localization'; let date = new Date(); export default { computed: { date: { get: function() { return formatDate(date, "shortDate"); }, set: function(value) { date = parseDate(value, "shortDate"); } } } } </script>
React
import React, { useState, useCallback } from "react"; import { formatDate, parseDate } from "devextreme/localization"; export default function App() { const [date, setDate] = useState(new Date()); const getFormattedDate = useCallback(() => { return formatDate(date, "shortDate") }, [date]); const setParsedDate = useCallback((event) => { setDate(parseDate(event.target.value, "shortDate")); }, []); return ( <input defaultValue={getFormattedDate()} onChange={setParsedDate} /> ); }
Similarly, you can use the formatNumber() and parseNumber() methods to format and parse a number or currency.
If you have technical questions, please create a support ticket in the DevExpress Support Center.