TimePicker

Select time with an interactive picker interface.

Import

import { TimePicker } from 'asterui'

Examples

Basic TimePicker

Simple time picker with default 24-hour format.

</>

import { TimePicker } from 'asterui'

function App() {
  return (
      <TimePicker placeholder="Select time" />
    )
}

export default App

12-Hour Format

Time picker with 12-hour format and AM/PM selection.

</>

import { TimePicker } from 'asterui'

function App() {
  return (
      <TimePicker format="12" placeholder="Select time" />
    )
}

export default App

With Seconds

Time picker that includes seconds selection.

</>

import { TimePicker } from 'asterui'

function App() {
  return (
      <TimePicker showSeconds placeholder="Select time" />
    )
}

export default App

Controlled

Controlled time picker with state management.

</>

Selected: None

import { TimePicker, Space, Typography } from 'asterui'
import { useState } from 'react'

function App() {
  const [time, setTime] = useState<Date | null>(null)
  
  return (
      <Space direction="vertical">
        <TimePicker value={time} onChange={setTime} />
        <Typography.Text size="sm" muted>
          Selected: {time ? time.toLocaleTimeString() : 'None'}
        </Typography.Text>
      </Space>
    )
}

export default App

Different Sizes

Time picker in various sizes.

</>

import { TimePicker, Space } from 'asterui'

function App() {
  return (
      <Space direction="vertical">
        <TimePicker size="xs" placeholder="Extra small" />
        <TimePicker size="sm" placeholder="Small" />
        <TimePicker size="md" placeholder="Medium" />
        <TimePicker size="lg" placeholder="Large" />
      </Space>
    )
}

export default App

Disabled

Disabled time picker with a default value.

</>

import { TimePicker } from 'asterui'

function App() {
  return (
      <TimePicker disabled defaultValue={new Date()} />
    )
}

export default App

Time Steps

Time picker with custom intervals (15-minute steps).

</>

import { TimePicker } from 'asterui'

function App() {
  return (
      <TimePicker minuteStep={15} placeholder="Select time (15 min intervals)" />
    )
}

export default App

In Form

TimePicker integrated with Form component using Row/Col layout.

</>

Start Time

 

End Time

 

Submit

import { TimePicker, Form, Button, Row, Col, notification } from 'asterui'

function App() {
  const handleSubmit = (values: Record<string, unknown>) => {
    const startTime = values.startTime as Date | null
    const endTime = values.endTime as Date | null
    notification.success({
      message: 'Form Submitted',
      description: `Start: ${startTime?.toLocaleTimeString() || 'Not set'}, End: ${endTime?.toLocaleTimeString() || 'Not set'}`,
    })
  }
  
  return (
      <Form onFinish={handleSubmit}>
        <Row gutter={16}>
          <Col span={12}>
            <Form.Item name="startTime" label="Start Time" rules={{ required: 'Please select start time' }}>
              <TimePicker placeholder="Start" />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item name="endTime" label="End Time">
              <TimePicker placeholder="End" />
            </Form.Item>
          </Col>
        </Row>
        <Form.Item>
          <Button htmlType="submit" color="primary">
            Submit
          </Button>
        </Form.Item>
      </Form>
    )
}

export default App

API

TimePicker

Property	Description	Type	Default
value	Controlled selected time	Date | null	-
defaultValue	Default selected time (uncontrolled)	Date | null	-
onChange	Callback when time is selected	(date: Date | null) => void	-
format	Time display format (12-hour or 24-hour)	'12' | '24'	'24'
placeholder	Input placeholder text	string	"Select time"
disabled	Disable the time picker	boolean	false
size	Input size	'xs' | 'sm' | 'md' | 'lg'	'md'
showSeconds	Show seconds column in the time picker	boolean	false
allowClear	Show clear button when time is selected	boolean	true
open	Controlled open state of the dropdown	boolean	-
onOpenChange	Callback when dropdown open state changes	(open: boolean) => void	-
hourStep	Interval between hours in the picker	number	1
minuteStep	Interval between minutes in the picker	number	1
secondStep	Interval between seconds in the picker	number	1
status	Validation status	'error' | 'warning'	-
data-testid	Test ID prefix for child elements	string	"timepicker"
className	Additional CSS classes	string	-

Accessibility

• Input field has aria-haspopup and aria-expanded attributes
• Dropdown uses role="dialog" with proper labeling
• Time columns use role="listbox" with aria-label
• Time options use role="option" with aria-selected
• Full keyboard navigation: Arrow keys to navigate, Escape to close, Enter to confirm
• Clear button has aria-label for screen readers
• Disabled state properly communicated to assistive technology