Time Picker

PreviousNext

時刻を選択・入力するピッカーコンポーネント。

––––AM
"use client"

import * as React from "react"

Installation

The Time Picker is built using a composition of the <Popover /> and the React Aria <TimeField /> primitive.

See installation instructions for the Popover component.

Usage

import { TimePicker } from "@/components/ui/time-picker"
const [time, setTime] = React.useState<Date>()
 
return <TimePicker value={time} onValueChange={setTime} />

Examples

Basic

A time picker with an editable segmented input and a dropdown for selecting hours and minutes.

––––AM
"use client"

import * as React from "react"

Input

A bare segmented input without the dropdown. Set showDropdown={false}.

––––AM
"use client"

import * as React from "react"

12-hour

A 12-hour time picker with an AM/PM column. Set hourCycle={12}.

––––AM
"use client"

import * as React from "react"

Seconds

A time picker with second precision. Set granularity="second".

––––––AM
"use client"

import * as React from "react"

Internationalization

Wrap the picker in an I18nProvider to format the time for the active locale. RTL locales are mirrored automatically.

––––AM
"use client"

import * as React from "react"