TimePicker

Selecione hora com uma interface de seletor interativo.

Importação

import { TimePicker } from 'asterui'

Exemplos

TimePicker Básico

Seletor de hora simples com formato de 24 horas padrão.

</>

import { TimePicker } from 'asterui'

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

export default App

Formato de 12 Horas

Seletor de hora com formato de 12 horas e seleção AM/PM.

</>

import { TimePicker } from 'asterui'

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

export default App

Com Segundos

Seletor de hora que inclui seleção de segundos.

</>

import { TimePicker } from 'asterui'

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

export default App

Controlado

Seletor de hora controlado com gerenciamento de estado.

</>

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

Diferentes Tamanhos

Seletor de hora em vários tamanhos.

</>

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

Desabilitado

Seletor de hora desabilitado com um valor padrão.

</>

import { TimePicker } from 'asterui'

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

export default App

Intervalos de Tempo

Seletor de hora com intervalos personalizados (passos de 15 minutos).

</>

import { TimePicker } from 'asterui'

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

export default App

Em Formulário

TimePicker integrado com componente Form usando layout Row/Col.

</>

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

Propriedade	Descrição	Tipo	Padrão
value	Hora selecionada controlada	Date | null	-
defaultValue	Hora selecionada padrão (não controlado)	Date | null	-
onChange	Callback quando hora é selecionada	(date: Date | null) => void	-
format	Formato de exibição de hora (12 horas ou 24 horas)	'12' | '24'	'24'
placeholder	Texto de placeholder do input	string	"Select time"
disabled	Desabilitar o seletor de hora	boolean	false
size	Tamanho do input	'xs' | 'sm' | 'md' | 'lg'	'md'
showSeconds	Mostrar coluna de segundos no seletor	boolean	false
allowClear	Mostrar botão de limpar quando hora está selecionada	boolean	true
open	Estado aberto controlado do dropdown	boolean	-
onOpenChange	Callback quando estado aberto do dropdown muda	(open: boolean) => void	-
hourStep	Intervalo entre horas no seletor	number	1
minuteStep	Intervalo entre minutos no seletor	number	1
secondStep	Intervalo entre segundos no seletor	number	1
status	Estado de validação	'error' | 'warning'	-
data-testid	Prefixo de ID de teste para elementos filhos	string	"timepicker"
className	Classes CSS adicionais	string	-

Acessibilidade

• Campo de entrada tem atributos aria-haspopup e aria-expanded
• Dropdown usa role="dialog" com rotulagem adequada
• Colunas de hora usam role="listbox" com aria-label
• Opções de hora usam role="option" com aria-selected
• Navegação completa por teclado: Teclas de seta para navegar, Escape para fechar, Enter para confirmar
• Botão de limpar tem aria-label para leitores de tela
• Estado desabilitado comunicado corretamente para tecnologia assistiva