useFormatDateTime

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

2026/11/6

const [value] = useState<Date>(() => new Date())
const formattedValue = useFormatDateTime(value)

return <Text>{formattedValue}</Text>

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

使い方

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

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

import { useFormatDateTime } from "@workspaces/ui"

const [value] = useState<Date>(() => new Date())
const formattedValue = useFormatDateTime(value)

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

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

ロケールを変更する

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

英語

11/6/2026

日本語

2026/11/6

ドイツ語

6.11.2026

フランス語

06/11/2026

中国語

2026/11/6

const [value] = useState<Date>(() => new Date())
const enValue = useFormatDateTime(value, { locale: "en-US" })
const jaValue = useFormatDateTime(value, { locale: "ja-JP" })
const deValue = useFormatDateTime(value, { locale: "de-DE" })
const frValue = useFormatDateTime(value, { locale: "fr-FR" })
const zhValue = useFormatDateTime(value, { 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に値を設定します。

2026年

const [value] = useState<Date>(() => new Date())
const formattedValue = useFormatDateTime(value, { year: "numeric" })

return <Text>{formattedValue}</Text>

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

月に変換する

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

11月

const [value] = useState<Date>(() => new Date())
const formattedValue = useFormatDateTime(value, { month: "long" })

return <Text>{formattedValue}</Text>

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

日に変換する

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

06日

const [value] = useState<Date>(() => new Date())
const formattedValue = useFormatDateTime(value, { day: "2-digit" })

return <Text>{formattedValue}</Text>

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

曜日に変換する

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

金曜日

const [value] = useState<Date>(() => new Date())
const formattedValue = useFormatDateTime(value, { weekday: "long" })

return <Text>{formattedValue}</Text>

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