useDateFormat

カテゴリ

エクスポートサイズ

807 B

最終更新日

先週

dayjsに着想を得て、渡されたトークンの文字列に従ってフォーマットされた日付を取得します。

使用可能なすべてのフォーマットのリスト（デフォルトはHH:mm:ss）

フォーマット	出力	説明
`Yo`	2018th	序数形式の年
`YY`	18	2桁の年
`YYYY`	2018	4桁の年
`M`	1-12	月（1から始まる）
`Mo`	1st, 2nd, ..., 12th	序数形式の月
`MM`	01-12	2桁の月
`MMM`	Jan-Dec	月の略称
`MMMM`	January-December	月の正式名称
`D`	1-31	月の曜日
`Do`	1st, 2nd, ..., 31st	序数形式の月の曜日
`DD`	01-31	2桁の月の曜日
`H`	0-23	時
`Ho`	0th, 1st, 2nd, ..., 23rd	序数形式の時
`HH`	00-23	2桁の時
`h`	1-12	12時間制の時
`ho`	1st, 2nd, ..., 12th	12時間制の時（序数形式）
`hh`	01-12	12時間制の2桁の時
`m`	0-59	分
`mo`	0th, 1st, ..., 59th	序数形式の分
`mm`	00-59	2桁の分
`s`	0-59	秒
`so`	0th, 1st, ..., 59th	序数形式の秒
`ss`	00-59	2桁の秒
`SSS`	000-999	3桁のミリ秒
`A`	AM PM	午前/午後
`AA`	A.M. P.M.	午前/午後（ピリオド付き）
`a`	am pm	午前/午後（小文字）
`aa`	a.m. p.m.	午前/午後（小文字、ピリオド付き）
`d`	0-6	曜日の数値（日曜日を0とする）
`dd`	S-S	曜日の略称
`ddd`	Sun-Sat	曜日の略称
`dddd`	Sunday-Saturday	曜日の正式名称

午前/午後は、`options`で`customMeridiem`を定義することでカスタマイズできます。

デモ

ソース

2024年11月28日(木) 03:59:12

フォーマッタエディタ

英語（米国）フランス語ドイツ語

使用方法

基本

vue

<script setup lang="ts">
import { useDateFormat, useNow } from '@vueuse/core'

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

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

ロケールを使用する

vue

<script setup lang="ts">
import { useDateFormat, useNow } from '@vueuse/core'

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

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

カスタム午前/午後を使用する

vue

<script setup lang="ts">
import { useDateFormat } from '@vueuse/core'

function customMeridiem(hours: number, minutes: number, isLowercase?: boolean, hasPeriod?: boolean) {
  const m = hours > 11 ? (isLowercase ? 'μμ' : 'ΜΜ') : (isLowercase ? 'πμ' : 'ΠΜ')
  return hasPeriod ? m.split('').reduce((acc, current) => acc += `${current}.`, '') : m
}

const am = useDateFormat('2022-01-01 05:05:05', 'hh:mm:ss A', { customMeridiem })
// am.value = '05:05:05 ΠΜ'
const pm = useDateFormat('2022-01-01 17:05:05', 'hh:mm:ss AA', { customMeridiem })
// pm.value = '05:05:05 Μ.Μ.'
</script>

型定義

型宣言の表示

typescript

export type DateLike = Date | number | string | undefined
export interface UseDateFormatOptions {
  /**
   * The locale(s) to used for dd/ddd/dddd/MMM/MMMM format
   *
   * [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument).
   */
  locales?: MaybeRefOrGetter<Intl.LocalesArgument>
  /**
   * A custom function to re-modify the way to display meridiem
   *
   */
  customMeridiem?: (
    hours: number,
    minutes: number,
    isLowercase?: boolean,
    hasPeriod?: boolean,
  ) => string
}
export declare function formatDate(
  date: Date,
  formatStr: string,
  options?: UseDateFormatOptions,
): string
export declare function normalizeDate(date: DateLike): Date
/**
 * Get the formatted date according to the string of tokens passed in.
 *
 * @see https://vueuse.dokyumento.jp/useDateFormat
 * @param date - The date to format, can either be a `Date` object, a timestamp, or a string
 * @param formatStr - The combination of tokens to format the date
 * @param options - UseDateFormatOptions
 */
export declare function useDateFormat(
  date: MaybeRefOrGetter<DateLike>,
  formatStr?: MaybeRefOrGetter<string>,
  options?: UseDateFormatOptions,
): ComputedRef<string>
export type UseDateFormatReturn = ReturnType<typeof useDateFormat>