useFormatDateTime

useFormatDateTime is a custom hook for formatting date time.

11/13/2026

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

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 [value] = useState<Date>(() => new Date())
const formattedValue = useFormatDateTime(value)

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

11/13/2026

ja-JP

2026/11/13

de-DE

13.11.2026

fr-FR

13/11/2026

zh-CN

2026/11/13

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">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 [value] = useState<Date>(() => new Date())
const formattedValue = useFormatDateTime(value, { 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.

November

const [value] = useState<Date>(() => new Date())
const formattedValue = useFormatDateTime(value, { 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 [value] = useState<Date>(() => new Date())
const formattedValue = useFormatDateTime(value, { 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.

Friday

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

return <Text>{formattedValue}</Text>

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