intl

const dateFormatIntlOptions = intl.convertDateFormatToIntlOptions("short-date-short-time");

// See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat#Parameters
// Setting the string value 'short-date-short-time' is similar to what is set in the object below
// dateFormatIntlOptions = {
//   day: "numeric",
//   month: "numeric",
//   year: "numeric",
//   hour: "numeric",
//   minute: "numeric"
// }

const now = Date.now(); // 1560375191812
const formattedDate = intl.formatDate(now, dateFormatIntlOptions);

console.log(formattedDate); // expected output for US English locale: "6/12/2019, 2:33 PM"

const dateTimeFieldFormat = new DateTimeFieldFormat({
  dateStyle: "short",
  timeStyle: "short",
  hour12: "always"
});
const dateTimeFieldFormatIntlOptions = intl.convertDateTimeFieldFormatToIntlOptions(dateTimeFieldFormat);
const now = Date.now(); // 1759292167543
const formattedDateTime = intl.formatDate(now, dateTimeFieldFormatIntlOptions);
console.log(formattedDateTime); // expected output for US English locale: "9/30/25, 9:16 PM"

const numberFieldFormat = new NumberFieldFormat({
  useGrouping: "always",
  minimumFractionDigits: 2,
  maximumFractionDigits: 2
});
const numberFieldFormatIntlOptions = intl.convertNumberFieldFormatToIntlOptions(numberFieldFormat);
const number = 123456.789;
const formattedNumber = intl.formatNumber(number, numberFieldFormatIntlOptions);
console.log(formattedNumber); // expected output for English locale: 123,456.79

const numberFormatIntlOptions = intl.convertNumberFormatToIntlOptions({
  places: 2,
  digitSeparator: true
});

// See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat#Parameters
// Setting the places and digitSeparator above is similar to what is set below
// numberFormatIntlOptions = {
//   useGrouping: true,
//   minimumFractionDigits: 2,
//   maximumFractionDigits: 2
// }

const number = 123456.789;
const formattedNumber = intl.formatNumber(number, numberFormatIntlOptions);
console.log(formattedNumber); // expected output for English locale: 123,456.79

// Assume the following directory structure
src/
  assets/
    translations/
      MyBundle.json
      MyBundle_fr.json
  widgets/
    MyWidget.ts

// Configure the message bundle loader given the directory structure noted above

const loader = intl.createJSONLoader({
  pattern: "my-application/", // The pattern is used to match the string in `intl.fetchMessageBundle("my-application/translations/MyBundle")`
  base: "my-application", // This removes the base, ie. "translations/MyBundle"
  location: new Url("./assets/", window.location.href) // Add the location, ie. "assets/translations/MyBundle"
});

// This loads file, "./assets/translations/MyBundle.json" or
// "./assets/translations/MyBundle_en.json" (unless locale is updated to something, e.g. like `fr`).

// Register the message bundle created from the createJSONLoader method
intl.registerMessageBundleLoader(loader);

// Fetches the message bundle, "./assets/translations/MyBundle.json"
const bundle = await intl.fetchMessageBundle("my-application/MyBundle");

// If no `base` property is specified for the loader method, the assets would read as,
src/
  assets/
    my-application/
      translations/
        MyBundle.json
        MyBundle_en.json
        MyBundle_fr.json

// The method would load file, "./assets/my-application/translations/MyBundle.json" or
// "./assets/my-application/translations/MyBundle_en.json" (unless locale is updated to something, e.g. like `fr`).

// This snippet shows the JSON message bundle used for the Home widget in English
{
  "widgetLabel": "Home",
  "button": "Home",
  "title": "Default map view"
}

// This snippet shows the same translation strings in the French locale
{
  "widgetLabel": "Accueil",
  "button": "Accueil",
  "title": "Vue cartographique par défaut"
}

// Fetches the message bundle from the specified location
const bundle = await intl.fetchMessageBundle("my-application/MyBundle");
// English message bundle is loaded

// If needing to update or set locale, call setLocale
intl.setLocale("fr");

// Once locale is updated, fetch the new French message bundle
const bundle = await intl.fetchMessageBundle("my-application/MyBundle");

const now = Date.now(); // 1560375191812
const dateFormatIntlOptions = intl.convertDateFormatToIntlOptions("short-date-short-time");

const formattedDate = intl.formatDate(now, dateFormatIntlOptions);

console.log(formattedDate); // expected output for English locale: "6/12/2019, 2:33 PM"

// Examples of formatting "1959-10-13" on an device set to locale "en-us".
console.log(intl.formatDateOnly("1959-10-13"));        // 10/13/1959
console.log(intl.formatDateOnly("1959-10-13",
  intl.convertDateFormatToIntlOptions("short-date"))); // 10/13/1959
console.log(intl.formatDateOnly("1959-10-13",
  intl.convertDateFormatToIntlOptions("long-date"));   // Tuesday, October 13, 1959

// Formats a number with a fixed number of places using a digit separator
const numberFormatIntlOptions = intl.convertNumberFormatToIntlOptions({
  places: 2,
  digitSeparator: true
});

const number = 123456.789;
const formattedNumber = intl.formatNumber(123456.789, numberFormatIntlOptions);
console.log(formattedNumber); // In US English locale: 123,456.79

// Formats a number as currency, in Euros
const amount = 14;
const formattedNumber = intl.formatNumber(amount, {
  style: "currency",
  currency: "EUR",
  currencyDisplay: "symbol"
});
console.log(formattedNumber); // In for US English locale: €14.00

// Formats a number as percentage
const growth = 0.5;
const formattedNumber = intl.formatNumber(growth, {
  style: "percent"
});
console.log(formattedNumber); // In for US English locale: 50%

// Examples of formatting "13:10:39" on an device set to locale "en-us".
console.log(intl.formatTimeOnly("13:10:39"));          // 1:10 PM
console.log(intl.formatTimeOnly("13:10:39",
  intl.convertDateFormatToIntlOptions("short-time"));  // 1:10 PM
console.log(intl.formatTimeOnly("13:10:39",
  intl.convertDateFormatToIntlOptions("long-time"));   // 1:10:39 PM

console.log(intl.formatDateOnly("1959-10-13")); // output - 10/13/1959
console.log(intl.formatDateOnly("1959-10-13", intl.convertDateFormatToIntlOptions("long-date"));

console.log(intl.getLocaleLanguage()); // "ar"

// For example: `en-US`
let locale = intl.getLocale();
// locale is now `en`
locale = intl.normalizeMessageBundleLocale(locale);

// Initially fetches the message bundle in the current language.
let bundle = await intl.fetchMessageBundle("my-application/MyBundle");
// Do something with the bundle

// Set the locale to French
intl.setLocale("fr");

// Listen for when locale is changed and then fetch the updated French message bundle
intl.onLocaleChange(function(locale) {
  console.log("locale changed to: ", locale);
  let bundle = await intl.fetchMessageBundle("my-application/MyBundle");
});

// This example defines a loader by implementing a MessageBundleLoader.

// Register a loader that loads bundles with the specified bundle identifier
// starting with "my-application\/"

const patternBundle = /^my-application\/(.+)/g;

intl.registerMessageBundleLoader({
  pattern: patternBundle,
  // Calls the FetchMessageBundle function of the loader, passing in the bundle identifier and locale
  async fetchMessageBundle(bundleId, locale) {
    // extract the filename from the bundle id.
    const filename = pattern.exec(bundleId)[1];
    // normalize the locale, e.g. 'fr-FR' > 'fr'
    const knownLocale = intl.normalizeMessageBundleLocale(locale);
    // Fetch the corresponding JSON file given the specified url path
    const response = await fetch(new Url(`./assets/translations/${filename}_${knownLocale}.json`, window.location.href));
    return response.json();
  }
});

// If the locale changes, calling fetchMessageBundle resolves to the new localized message bundle.
intl.onLocaleChange((newLocale) => {
  const bundle = await intl.fetchMessageBundle("my-application/translations/MyBundle");
  // loads file: "https://myserver/my-application/translations/MyBundle_fr.json"
});

// Updates the locale
intl.setLocale("fr");

// This example defines the loader via the createJSONLoader method.

// Register a loader that loads bundles with the specified bundle identifier
// starting with "my-application\/"

const patternBundle = /^my-application\/(.+)/g;

intl.registerMessageBundleLoader(
  intl.createJSONLoader({
    pattern: patternBundle,
    base: "my-application/",
    location: new URL("./assets/", window.location.href)
  })
);

// If the locale changes, calling fetchMessageBundle resolves to the new localized message bundle.
intl.onLocaleChange((newLocale) => {
  const bundle = await intl.fetchMessageBundle("my-application/MyBundle");
 // loads file: "https://myserver/my-application/MyBundle_fr.json"
});

// Updates the locale
intl.setLocale("fr");

// Sets the locale to French
intl.setLocale("fr");

// Sets the locale to UK English.
// Dates are formatted in day/month/year order.
intl.setLocale("en-GB");

// Sets the locale to US English.
// Dates are formatted in month/day/year order.
intl.setLocale("en-US");

// Format a date
const data = {
  increasedValue: 500,
  time: Date.UTC(2019),
}

const dateFormatOptions = intl.convertDateFormatToIntlOptions("short-date-short-time-24");

intl.substitute("Date: {time}", data, {
  format: {
    time: {
      type: "date",
      intlOptions: dateFormatOptions
    }
  }
});

// Format a number
const data = {
  increasedValue: 500,
  time: Date.UTC(2019),
}

intl.substitute("Number: {value}", data, {
  format: {
    value: {
      type: "number",
      intlOptions: {
        maximumFractionDigits: 21
      }
    }
  }
});

const data = {
  increasedValue: 500,
  time: Date.UTC(2019),
}

intl.substitute("Median income increased by {increasedValue} in {time:yearFormat}", data, {
  format: {
    increasedValue: {
      type: "number",
      intlOptions: {
        useGrouping: true,
        currency: "EUR",
        currencyDisplay: "symbol",
        maximumFractionDigits: 2
      }
    },
    yearFormat: {
      type: "date",
      intlOptions: {
        year: "numeric"
      }
    }
  }
});