Angular Common - Object Structures - format
This option accepts three types of values:
String
A predefined format or custom format string.Function
Specifies a custom format. A shortcut for the formatter option.Object
Allows you to configure the format. Can have one of the following structures:// Uses a predefined format format: { type: String, // one of the predefined formats precision: Number, // the precision of values currency: String // a specific 3-letter code for the "currency" format }
or
// Specifies a custom format format: { formatter: Function, // a custom formatting function parser: Function // a parsing function for string values }
You can specify the Intl NumberFormat's and DateTimeFormat's
options
parameter fields if you use Devextreme-Intl:format: { year: "2-digit", month: "narrow", day: "2-digit" } === or === format: { style: "currency", currency: "EUR", useGrouping: true }
If you use Globalize, you can use the fields the numberFormatter, currencyFormatter, and dateFormatter accept instead of the fields described in this section. For example, you can use skeletons to format dates. Note that this approach can require additional CLDR modules not shipped with the DevExtreme package.
format: { skeleton: 'GyMMMd' }
currency
Specifies the currency code. Applies only if the type is "currency".
This option accepts a 3-letter ISO 4217 code for each currency. Assign the code to this option if you use Intl, or do the following if you use Globalize:
- Get the currencies.json file that corresponds to your culture from a folder here.
- Load this file's contents in your app using a method described here.
- Assign the currency's 3-letter code to this option.
Alternatively, you can assign "default" to this option to apply the global default currency.
See Also
- format.precision
- Localization
formatter
If none of the predefined formats meet your requirements, use this function to specify a custom format. If formatter is the only field that you need to specify in the format object, assign the function straight to the format option as shown below.
format: function (value) { // ... return formattedValue; }
See Also
- format.parser
parser
Parses string values into numeric or date-time values. Can be used with formatter or one of the predefined formats.
A widget calls this function internally, for example, when a user enters a value. The following code gives an example of the formatter and parser functions which turns dates into strings, and parses strings back into dates, respectively.
formatter: function (date) { var month = date.getMonth() + 1, day = date.getDate(), year = date.getFullYear(); return year + "." + month + "." + day; }, parser: function (e) { var parts = e.split("."), day = Number(parts[2]), month = Number(parts[1] - 1), year = Number(parts[0]); return new Date(year, month, day); }
type
Specifies a predefined format. Does not apply if you have specified the formatter function.
You can choose one of the predefined formats, depending on the values you need to format, from the following groups:
Numeric Formats
|
|
Date-Time Formats
|
|
Currency Formats
- "currency" - "$3.95"*
The "fixedPoint", "decimal" or "currency" format can be paired with the "largeNumber", "thousands", "millions", "billions" or "trillions" format using a space separator, e.g., "fixedPoint thousands".
If the type is the only field you need to specify in the format object, assign the value of this field straight to the format option as shown below.
format: "shortDate"
When using a widget as an ASP.NET MVC Control, you can specify this option using the Format
enum. This enum accepts the same values, but they start with an upper-case letter, for example, "fixedPoint" becomes FixedPoint
.
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.