---
title: "formatDate"
description: "The module formatDate is a function that formats dates with the native api [Intl.DateTimeFormat](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat) from browsers and Node.js"
package: "@maz-ui/utils"
url: "https://maz-ui.com/ecosystem/utils/date"
---

# formatDate

> The module formatDate is a function that formats dates with the native api [Intl.DateTimeFormat](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat) from browsers and Node.js

- Package: `@maz-ui/utils`
- Import: `import { formatDate } from '@maz-ui/utils/helpers/formatDate'`
- Web: https://maz-ui.com/ecosystem/utils/date

> This module use the native api [Intl.DateTimeFormat](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat) from browsers

```vue
<script lang="ts" setup>
import { formatDate } from '@maz-ui/utils'
import { computed, ref } from 'vue'

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

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

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

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

## Options

> All options from [Intl.DateTimeFormat](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat) are available

## Default options

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