format.md

id	Format
type	Object | Enums.Format | String | function(value)
default	undefined
module	common/core/localization
export	Format

---

shortDescription

Formats values.

param(value): Number | Date

The value to be formatted.

return: String

The value after formatting.

---

This property accepts three types of values:

• String
  A predefined format or custom format string.

• Function
  Applies a custom format to a value and returns this value as a string. A shortcut for the formatter property.

• Object
  Allows you to configure the format. Can have one of the following structures:

    <!-- tab: DevExtreme -->
    // 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

    <!-- tab: DevExtreme -->
    // 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:

    <!-- tab: 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 that 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.

    <!-- tab: Globalize -->
    format: { skeleton: 'GyMMMd' }
  

  [note] Depending on the object structure, the format utility chooses the mechanism to use: DevExtreme internal, Intl, or Globalize. If you mix properties from different zones (DevExtreme, Intl, or Globalize) in an object, the result can be unpredictable.

#include btn-open-demo with { href: "https://js.devexpress.com/Demos/WidgetsGallery/Demo/Localization/UsingIntl/" }