useFormatDateTime

useFormatDateTimeは、日時をフォーマットするカスタムフックです。

2025/11/4

const formattedValue = useFormatDateTime(new Date())

return <Text>{formattedValue}</Text>

こちらのコードを使用する場合は、"use client"をファイルの上部に追加する必要があります。

使い方

import { useFormatDateTime } from "@yamada-ui/react"

import { useFormatDateTime } from "@/components/ui"

import { useFormatDateTime } from "@workspaces/ui"

const formattedValue = useFormatDateTime(new Date())

指定されたロケールとオプションに従って日時をフォーマットします。フックはフォーマットされた値を直接返します。

useFormatDateTimeは、内部でIntl.DateTimeFormatを使用しています。

ロケールを変更する

ロケールを変更する場合は、localeに値を設定します。

英語

11/4/2025

日本語

2025/11/4

ドイツ語

4.11.2025

フランス語

04/11/2025

中国語

2025/11/4

const enValue = useFormatDateTime(new Date(), { locale: "en-US" })
const jaValue = useFormatDateTime(new Date(), { locale: "ja-JP" })
const deValue = useFormatDateTime(new Date(), { locale: "de-DE" })
const frValue = useFormatDateTime(new Date(), { locale: "fr-FR" })
const zhValue = useFormatDateTime(new Date(), { locale: "zh-CN" })

return (
  <Grid templateColumns="auto 1fr" gap="sm">
    <Text fontWeight="semibold">英語</Text>
    <Text>{enValue}</Text>

    <Text fontWeight="semibold">日本語</Text>
    <Text>{jaValue}</Text>

    <Text fontWeight="semibold">ドイツ語</Text>
    <Text>{deValue}</Text>

    <Text fontWeight="semibold">フランス語</Text>
    <Text>{frValue}</Text>

    <Text fontWeight="semibold">中国語</Text>
    <Text>{zhValue}</Text>
  </Grid>
)

こちらのコードを使用する場合は、"use client"をファイルの上部に追加する必要があります。

プロジェクト全体のロケールを設定する

アプリケーション全体のロケールの設定をする場合は、UIProviderのlocaleに値を設定します。

import { UIProvider } from "@yamada-ui/react"

const App = () => {
  return (
    <UIProvider locale="ja-JP">
      <YourComponent />
    </UIProvider>
  )
}

年に変換する

年に変換する場合は、yearに値を設定します。

2025年

const formattedValue = useFormatDateTime(new Date(), { year: "numeric" })

return <Text>{formattedValue}</Text>

こちらのコードを使用する場合は、"use client"をファイルの上部に追加する必要があります。

月に変換する

月に変換する場合は、monthに値を設定します。

11月

const formattedValue = useFormatDateTime(new Date(), { month: "long" })

return <Text>{formattedValue}</Text>

こちらのコードを使用する場合は、"use client"をファイルの上部に追加する必要があります。

日に変換する

日に変換する場合は、dayに値を設定します。

04日

const formattedValue = useFormatDateTime(new Date(), { day: "2-digit" })

return <Text>{formattedValue}</Text>

こちらのコードを使用する場合は、"use client"をファイルの上部に追加する必要があります。

曜日に変換する

曜日に変換する場合は、weekdayに値を設定します。

火曜日

const formattedValue = useFormatDateTime(new Date(), { weekday: "long" })

return <Text>{formattedValue}</Text>

こちらのコードを使用する場合は、"use client"をファイルの上部に追加する必要があります。