useFormatDateTime

useFormatDateTime is a custom hook for formatting date time.

1/19/2026

const formattedValue = useFormatDateTime(new Date())

return <Text>{formattedValue}</Text>

If you use this code, you need to add "use client" to the top of the file.

Usage

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

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

import { useFormatDateTime } from "@workspaces/ui"

const formattedValue = useFormatDateTime(new Date())

It formats date time according to the specified locale and options. The hook returns the formatted value directly.

useFormatDateTime internally uses Intl.DateTimeFormat.

Changing the Locale

To change the locale, set a value for locale.

en-US

1/19/2026

ja-JP

2026/1/19

de-DE

19.1.2026

fr-FR

19/01/2026

zh-CN

2026/1/19

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">en-US</Text>
    <Text>{enValue}</Text>

    <Text fontWeight="semibold">ja-JP</Text>
    <Text>{jaValue}</Text>

    <Text fontWeight="semibold">de-DE</Text>
    <Text>{deValue}</Text>

    <Text fontWeight="semibold">fr-FR</Text>
    <Text>{frValue}</Text>

    <Text fontWeight="semibold">zh-CN</Text>
    <Text>{zhValue}</Text>
  </Grid>
)

If you use this code, you need to add "use client" to the top of the file.

Set the Locale for the Entire Application

If you want to set the locale for the entire application, set the locale for the UIProvider.

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

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

Converting to Year

To convert to year, set a value for year.

2026

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

return <Text>{formattedValue}</Text>

If you use this code, you need to add "use client" to the top of the file.

Converting to Month

To convert to month, set a value for month.

January

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

return <Text>{formattedValue}</Text>

If you use this code, you need to add "use client" to the top of the file.

Converting to Day

To convert to day, set a value for day.

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

return <Text>{formattedValue}</Text>

If you use this code, you need to add "use client" to the top of the file.

Converting to Weekday

To convert to weekday, set a value for weekday.

Monday

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

return <Text>{formattedValue}</Text>

If you use this code, you need to add "use client" to the top of the file.