Skip to content
On this page

useDateFormat

Category
Export Size
734 B
Last Changed
5 days ago

Get the formatted date according to the string of tokens passed in, inspired by dayjs.

List of all available formats (HH:mm:ss by default):

FormatOutputDescription
YY18Two-digit year
YYYY2018Four-digit year
M1-12The month, beginning at 1
MM01-12The month, 2-digits
D1-31The day of the month
DD01-31The day of the month, 2-digits
H0-23The hour
HH00-23The hour, 2-digits
h1-12The hour, 12-hour clock
hh01-12The hour, 12-hour clock, 2-digits
m0-59The minute
mm00-59The minute, 2-digits
s0-59The second
ss00-59The second, 2-digits
SSS000-999The millisecond, 3-digits
d0-6The day of the week, with Sunday as 0
ddS-SThe min name of the day of the week
dddSun-SatThe short name of the day of the week
ddddSunday-SaturdayThe name of the day of the week

Demo

2022-08-17 15:51:11

Formatter Editor :

Usage

Basic

<script setup lang="ts">

import { ref, computed } from 'vue-demi'
import { useNow, useDateFormat } from '@vueuse/core'

const formatted = useDateFormat(useNow(), 'YYYY-MM-DD HH:mm:ss')

</script>

<template>
  <div>{{ formatted }}</div>
</template>
<script setup lang="ts">

import { ref, computed } from 'vue-demi'
import { useNow, useDateFormat } from '@vueuse/core'

const formatted = useDateFormat(useNow(), 'YYYY-MM-DD HH:mm:ss')

</script>

<template>
  <div>{{ formatted }}</div>
</template>

Use with locale

<script setup lang="ts">

import { ref, computed } from 'vue-demi'
import { useNow, useDateFormat } from '@vueuse/core'

const formatted = useDateFormat(useNow(), 'YYYY-MM-DD (ddd)', { locales: 'en-US' })

</script>

<template>
  <div>{{ formatted }}</div>
</template>
<script setup lang="ts">

import { ref, computed } from 'vue-demi'
import { useNow, useDateFormat } from '@vueuse/core'

const formatted = useDateFormat(useNow(), 'YYYY-MM-DD (ddd)', { locales: 'en-US' })

</script>

<template>
  <div>{{ formatted }}</div>
</template>

Type Declarations

export declare type DateLike = Date | number | string | undefined
export interface UseDateFormatOptions {
  /**
   * The locale(s) to used for dd/ddd/dddd format
   *
   * [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument).
   */
  locales?: Intl.LocalesArgument
}
export declare const formatDate: (
  date: Date,
  formatStr: string,
  locales?: Intl.LocalesArgument
) => string
export declare const normalizeDate: (date: DateLike) => Date
/**
 * Get the formatted date according to the string of tokens passed in.
 *
 * @see https://vueuse.org/useDateFormat
 * @param date
 * @param formatStr
 * @param options
 */
export declare function useDateFormat(
  date: MaybeComputedRef<DateLike>,
  formatStr?: MaybeComputedRef<string>,
  options?: UseDateFormatOptions
): ComputedRef<string>
export declare type UseDateFormatReturn = ReturnType<typeof useDateFormat>
export declare type DateLike = Date | number | string | undefined
export interface UseDateFormatOptions {
  /**
   * The locale(s) to used for dd/ddd/dddd format
   *
   * [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument).
   */
  locales?: Intl.LocalesArgument
}
export declare const formatDate: (
  date: Date,
  formatStr: string,
  locales?: Intl.LocalesArgument
) => string
export declare const normalizeDate: (date: DateLike) => Date
/**
 * Get the formatted date according to the string of tokens passed in.
 *
 * @see https://vueuse.org/useDateFormat
 * @param date
 * @param formatStr
 * @param options
 */
export declare function useDateFormat(
  date: MaybeComputedRef<DateLike>,
  formatStr?: MaybeComputedRef<string>,
  options?: UseDateFormatOptions
): ComputedRef<string>
export declare type UseDateFormatReturn = ReturnType<typeof useDateFormat>

Source

SourceDemoDocs

Contributors

Anthony Fu
aki77
Black
webfansplz

Changelog

Pending for release...
0fdbb - fix(shared): resolve internal circular reference
v9.0.1 on 7/29/2022
5b1e0 - feat: support dd, ddd and dddd formatter (#1986)
v8.9.1 on 7/8/2022
a9ccc - feat(all): use MaybeComputedRef (#1768)
v8.2.6 on 4/14/2022
a9c80 - feat: add format (#1491)
v8.0.0-beta.1 on 3/5/2022
5c445 - feat: new function (#1123)

Released under the MIT License.