Vue Common - Object Structures - format

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:

  // 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:

  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' }

View Demo

See Also

• format.precision
• Localization

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 property as shown below.

format: function (value) {
    // ...
    return formattedValue;
}

See Also

• format.parser

A UI component 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);
}

This property applies when the type property has one of the following values.

• 'currency'
• 'fixedPoint'
• 'percent'
• 'decimal'
• 'exponential'
• 'largeNumber'
• 'thousands'
• 'millions'
• 'billions'
• 'trillions'

View Demo

You can choose one of the predefined formats, depending on the values you need to format, from the following groups:

Numeric Formats

Currency Formats

• "currency" - "$3.95"*

Date-Time Formats

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 property as shown below.

format: "shortDate"

When using a UI component as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control, you can specify this property using the Format enum. This enum accepts the same values, but they start with an upper-case letter, for example, "fixedPoint" becomes FixedPoint.

View Demo

See Also

• format.currency
• format.precision