vue-composable

# Intl.DateTimeFormat

The Intl.DateTimeFormat (opens new window).

# Parameters

import { useIntlDateTimeFormat } from "vue-composable";

useIntlDateTimeFormat(locales?,options?);
Parameters Type Required Default Description
locales Ref<string | string[]> false undefined Default locale passed to Intl.DateTimeFormat (opens new window)
options Ref<Intl.DateTimeFormatOptions> false undefined Default options passed to Intl.DateTimeFormat (opens new window)

# State

The useIntlDateTimeFormat function exposes the following reactive state:

import { useIntlDateTimeFormat } from "vue-composable";

const { formatter } = useIntlDateTimeFormat();
State Type Description
formatter Ref<Intl.DateTimeFormat> Current formatter used

# Methods

The useIntlDateTimeFormat function exposes the following methods:

import { useIntlDateTimeFormat } from "vue-composable";

const { format, formatString } = useIntlDateTimeFormat();
Signature Description
format returns reactive ref<string>, if value is ref<number> it will update automatically
formatString returns formatted string

# Example

value: 01/01/2020

formatted: 01/01/2020

# Code

<template>
  <div>
    <ul>
      <li>
        <label for="value">value</label>
        <input name="value" v-model="value" type="date" />
      </li>

      <li>
        <label for="locale">Locale</label>
        <select name="locale" v-model="selectedLocale">
          <option v-for="l in locales" :value="l">{{ l }}</option>
        </select>
      </li>

      <li>
        <label for="style">options.year</label>
        <select name="style" v-model="options.year">
          <option value="numeric">numeric</option>
          <option value="2-digit">2-digit</option>
        </select>
      </li>
    </ul>

    <p>
      value:
      <b>{{ formatString(value) }}</b>
    </p>

    <p>
      formatted:
      <b>{{ formattedValue }}</b>
    </p>
  </div>
</template>

<script>
import { defineComponent, ref } from "@vue/composition-api";
import { useIntlDateTimeFormat, useLanguage } from "vue-composable";

export default defineComponent({
  name: "intl-date-time-format-example",

  setup() {
    const { languages, language } = useLanguage();
    const locales = languages.value.concat(...["pt-PT", "pt-BR"]);

    const selectedLocale = ref(language.value || "en");

    const options = ref({
      year: "numeric",
      month: "2-digit",
      day: "2-digit"
    });

    const { formatString, format } = useIntlDateTimeFormat(
      selectedLocale,
      options
    );

    const value = ref("2020-01-01");

    const formattedValue = format(value);

    return {
      locales,

      selectedLocale,
      formatString,

      options,

      value,
      formattedValue
    };
  }
});
</script>

← numberFormat →