VueUseuseDateFormat
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):
| Format | Output | Description |
|---|---|---|
YY | 18 | Two-digit year |
YYYY | 2018 | Four-digit year |
M | 1-12 | The month, beginning at 1 |
MM | 01-12 | The month, 2-digits |
D | 1-31 | The day of the month |
DD | 01-31 | The day of the month, 2-digits |
H | 0-23 | The hour |
HH | 00-23 | The hour, 2-digits |
h | 1-12 | The hour, 12-hour clock |
hh | 01-12 | The hour, 12-hour clock, 2-digits |
m | 0-59 | The minute |
mm | 00-59 | The minute, 2-digits |
s | 0-59 | The second |
ss | 00-59 | The second, 2-digits |
SSS | 000-999 | The millisecond, 3-digits |
d | 0-6 | The day of the week, with Sunday as 0 |
dd | S-S | The min name of the day of the week |
ddd | Sun-Sat | The short name of the day of the week |
dddd | Sunday-Saturday | The name of the day of the week |
Demo
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
Contributors
Anthony Fu
aki77
Black
webfansplz