useFormatDateTime
useFormatDateTime is a custom hook for formatting date time.
10/20/2025
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
10/20/2025
ja-JP
2025/10/20
de-DE
20.10.2025
fr-FR
20/10/2025
zh-CN
2025/10/20
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.
2025
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.
October
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.
20
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.