date

The module date is a function that formats date

This module use the native api Intl.DateTimeFormat from browsers

formatted value: Feb 1, 2022

<template>
  <MazInput v-model="dateValue" type="date" />

  <div
    style="padding: 16px; margin-top: 16px; background-color: var(--maz-color-bg-lighter);"
  >
    {{ dateFormatted }}
  </div>
</template>

<script lang="ts" setup>
  import { date } from 'maz-ui'
  import { ref, computed } from 'vue'

  const dateValue = ref('2022-02-01')

  const dateFormatted = computed(() =>
    dateValue.value ? date(dateValue.value, 'en-US') : undefined,
  )
</script>

Options

All options from Intl.DateTimeFormat are available

Default options

const DEFAULT_OPTIONS: Intl.DateTimeFormatOptions = {
  month: 'short',
  day: 'numeric',
  year: 'numeric',
}