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
],
// ...
})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.common.css';
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.common.css';
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
A custom format string specifies a format using Unicode Locale Data Markup Language (LDML) patterns. An LDML pattern consists of wildcard characters and characters displayed as is. The following wildcard characters are supported:
Numeric Formats
| Format character | Description |
|---|---|
| 0 | A digit. Displays '0' if it is not specified in the UI. |
| # | A digit or nothing. One symbol represents several integer digits, but only one decimal digit. For example, "#.#" represents "123.4", but not "123.45". |
| . | A decimal separator. Displayed according to the specified locale. |
| , | A group separator. Displayed according to the specified locale. |
| % | The percent sign. Multiplies the input value by 100. If it is enclosed in single quotes ('%'), it only adds this sign to the input value. |
| ; | Separates positive and negative numbers. If there is no explicit negative format, a positive number receives the "-" prefix. |
| Other characters | Any character. Should be placed only at the format string's beginning or end. You can use the special characters above as well (in single quotation marks). |
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. |
The following code shows how to apply LDML patterns to format numbers and dates:
jQuery
$(function() {
$("#numberBoxContainer").dxNumberBox({
value: 5,
format: "0.##" // "0.01", "5", "5.01"
});
$("#dateBoxContainer").dxDateBox({
value: new Date(),
displayFormat: "MMM d, yyyy" // "Jun 15, 2018"
});
});Angular
<dx-number-box
[(value)]="numberBoxValue"
format="0.##"> <!-- "0.01", "5", "5.01" -->
</dx-number-box>
<dx-date-box
[(value)]="dateBoxValue"
format="MMM d, yyyy"> <!-- "Jun 15, 2018" -->
</dx-date-box>
import { DxNumberBoxModule, DxDateBoxModule } from "devextreme-angular";
// ...
export class AppComponent {
numberBoxValue: number = 5;
dateBoxValue: Date = new Date();
}
@NgModule({
imports: [
// ...
DxNumberBoxModule,
DxDateBoxModule,
],
// ...
})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
],
// ...
})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
#dateInput
[value]="date"
(change)="date = dateInput.value;"/>Similarly, you can use the formatNumber() and parseNumber() methods to format and parse a number or currency.