Date Formatter

Date Formatter is a composable that assists in formatting ISO datetime strings into human-readable formats. Optionally, JS Date object can be passed. It supports internationalization through i18n injection and provides various formatting options.

Features

• Reactive to locale changes through i18n injection
• Uses native Intl.DateTimeFormat with fallback to moment.js
• Supports multiple date and time format combinations
• Configurable default locale

Usage

The composable can be used with or without i18n injection. If i18n is injected, the formatter will automatically react to locale changes. When used in same component where i18n is injected - i18n can be provided in contructor options.

Sample

<template>
  <div>
    <div class="locale-switch">
      <div>
        Current Locale: {{ locale }}
      </div>
      <ci-button @click="changeLocale('en-US')">en-US</ci-button>
      <ci-button @click="changeLocale('fr')">fr</ci-button>

      <input v-model="isoDate"/>
    </div>
    <div class="format-example">
      <h4>Time:</h4>
      <p>{{ formatter.time(isoDate, i18n) }}</p>
    </div>
    <div class="format-example">
      <h4>Date Time:</h4>
      <p>{{ formatter.dateTime(isoDate) }}</p>
    </div>
    <div class="format-example">
      <h4>Short Date:</h4>
      <p>{{ formatter.shortDate(isoDate) }}</p>
    </div>
    <div class="format-example">
      <h4>Date:</h4>
      <p>{{ formatter.date(isoDate) }}</p>
    </div>
    <div class="format-example">
      <h4>Relative:</h4>
      <p>{{ formatter.relative(isoDate, '2024-04-20T15:30:00Z') }}</p>
    </div>
  </div>
</template>

<script>
export default {
  setup() {
    const i18n = provideI18n('en-US', {
      getTranslations: (locale, groupKey) => new Promise((resolve) => {
        resolve({ id: groupKey, locale, translations: [] })
      }),
      translate: (texts, locale, groupKey) => new Promise((resolve) => {
        resolve({ id: groupKey, locale, translations: [] })
      }),
    })

    const formatter = useDateFormatter({
      i18n: i18n
    })

    return {
      formatter,
      i18n
    }
  },
  data() {
    return {
      locale: 'en-US',
      isoDate: '2024-04-20T15:30:00Z'
    }
  },
  methods: {
    changeLocale(target) {
      this.locale = target
      this.i18n.setLocale(target)
    }
  }
}
</script>

<style>
.format-example {
  margin-bottom: 1rem;
}
</style>

Constructor options

Name	Type	Default	Description
locale	string	undefined	Locale to use instead of i18n
i18n	I18n	undefined	Default I18n to be used. Use only in edge case scenario when composable needs to be used in same component where i18n is injected

Available Methods

time(string|Date, FormatOverrides)

Returns time in 12-hour format with minutes. Example: "3:30 PM"

dateTime(string|Date, FormatOverrides)

Returns shortened date with time. Example: "Mar 20, 2024, 3:30 PM"

shortDate(string|Date, FormatOverrides)

Returns date in numeric format. Example: "3/20/2024"

date(string|Date, FormatOverrides)

Returns shortened date. Example: "Mar 20, 2024"

relative(string|Date)

Returns time elapsed from current time. Example: "1 year ago"

Arguments

Name	Type	Description
date	string|date	ISO-8601 date string or native Date object
overrides	FormatOverrides	Overrides for Intl formatter. Use only for edge cases (e.g. include week day)

Notes

• All methods expect an ISO date string as input
• The formatter will automatically use the browser's native Intl.DateTimeFormat if available
• If Intl.DateTimeFormat is not supported, it will fall back to moment.js
• The output format will vary based on the current locale