Date and Number Formats

For localized number and date field source values you will probably use DateField and NumberField. These components will use specific Vue I18n functions under the hood:

├── src
│   ├── i18n
│   │   ├── rules
│   │   │   ├── datetime.js
│   │   │   ├── numbers.js

• For date rules, click on this link.
• For number rules, click on this link

src/i18n/rules/datetime.js

export default {
  en: {
    year: {
      year: "numeric",
    },
    month: {
      month: "short",
    },
    shortFormat: {
      dateStyle: "short",
    },
    longFormat: {
      year: "numeric",
      month: "long",
      day: "numeric",
      weekday: "long",
      hour: "numeric",
      minute: "numeric",
      hour12: false,
    },
  },
  tr: {
    year: {
      year: "numeric",
    },
    month: {
      month: "short",
    },
    shortFormat: {
      dateStyle: "short",
    },
    longFormat: {
      year: "numeric",
      month: "long",
      day: "numeric",
      weekday: "long",
      hour: "numeric",
      minute: "numeric",
      hour12: false,
    },
  },
};

For example, a date rule defined as above is defined in i18n/index.js.

src/i18n/index.js

import { createI18n } from "vue-i18n";
import pluralRules from "./rules/pluralization";
import numberFormats from "./rules/numbers.js";
import datetimeFormats from "./rules/datetime.js";
import _en from "./locales/en.json";
import _tr from "./locales/tr.json";

const i18n = createI18n({
  locale: import.meta.env.VITE_DEFAULT_LOCALE,
  fallbackLocale: import.meta.env.VITE_FALLBACK_LOCALE,
  legacy: false,
  globalInjection: true,
  // forceStringify: false,
  messages: { tr: _tr, en: _en },
  runtimeOnly: false,
  pluralRules,
  numberFormats,
  datetimeFormats,
});

DateField

<date-field source="creationDate" format="short"></date-field>

NumberField

<number-field source="price" format="currency"></number-field>