TimePicker

Selecciona la hora con una interfaz de selector interactivo.

Importación

import { TimePicker } from 'asterui'

Ejemplos

TimePicker Básico

Selector de hora simple con formato de 24 horas predeterminado.

</>

import { TimePicker } from 'asterui'

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

export default App

Formato de 12 Horas

Selector de hora con formato de 12 horas y selección AM/PM.

</>

import { TimePicker } from 'asterui'

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

export default App

Con Segundos

Selector de hora que incluye selección de segundos.

</>

import { TimePicker } from 'asterui'

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

export default App

Controlado

Selector de hora controlado con gestión 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 Tamaños

Selector de hora en varios tamaños.

</>

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

Deshabilitado

Selector de hora deshabilitado con un valor predeterminado.

</>

import { TimePicker } from 'asterui'

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

export default App

Intervalos de Tiempo

Selector de hora con intervalos personalizados (pasos de 15 minutos).

</>

import { TimePicker } from 'asterui'

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

export default App

En Formulario

TimePicker integrado con componente Form usando diseño 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

Propiedad	Descripción	Tipo	Predeterminado
value	Hora seleccionada controlada	Date | null	-
defaultValue	Hora seleccionada predeterminada (no controlado)	Date | null	-
onChange	Callback cuando se selecciona la hora	(date: Date | null) => void	-
format	Formato de visualización de hora (12 horas o 24 horas)	'12' | '24'	'24'
placeholder	Texto de placeholder del input	string	"Select time"
disabled	Deshabilitar el selector de hora	boolean	false
size	Tamaño del input	'xs' | 'sm' | 'md' | 'lg'	'md'
showSeconds	Mostrar columna de segundos en el selector	boolean	false
allowClear	Mostrar botón de limpiar cuando hay hora seleccionada	boolean	true
open	Estado abierto controlado del desplegable	boolean	-
onOpenChange	Callback cuando cambia el estado abierto del desplegable	(open: boolean) => void	-
hourStep	Intervalo entre horas en el selector	number	1
minuteStep	Intervalo entre minutos en el selector	number	1
secondStep	Intervalo entre segundos en el selector	number	1
status	Estado de validación	'error' | 'warning'	-
data-testid	Prefijo de ID de prueba para elementos hijos	string	"timepicker"
className	Clases CSS adicionales	string	-

Accesibilidad

• El campo de entrada tiene atributos aria-haspopup y aria-expanded
• El desplegable usa role="dialog" con etiquetado adecuado
• Las columnas de hora usan role="listbox" con aria-label
• Las opciones de hora usan role="option" con aria-selected
• Navegación completa por teclado: Teclas de flecha para navegar, Escape para cerrar, Enter para confirmar
• El botón de limpiar tiene aria-label para lectores de pantalla
• El estado deshabilitado se comunica correctamente a la tecnología asistiva