Sélecteur d'heure

Sélectionner l’heure avec une interface de sélection interactive.

Importation

import { TimePicker } from 'asterui'

Exemples

Sélecteur d'heure de base

Sélecteur d'heure simple avec format 24 heures par défaut.

import { TimePicker } from 'asterui'

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

export default App

Format 12 heures

Sélecteur d'heure avec format 12 heures et sélection AM/PM.

import { TimePicker } from 'asterui'

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

export default App

Avec secondes

Sélecteur d'heure qui inclut la sélection des secondes.

import { TimePicker } from 'asterui'

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

export default App

Contrôlé

Sélecteur d'heure contrôlé avec gestion d'état.

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

Différentes tailles

Sélecteur d'heure en différentes tailles.

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

Désactivé

Sélecteur d'heure désactivé avec une valeur par défaut.

import { TimePicker } from 'asterui'

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

export default App

Intervalles de temps

Sélecteur d'heure avec intervalles personnalisés (pas de 15 minutes).

import { TimePicker } from 'asterui'

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

export default App

Dans un formulaire

TimePicker intégré avec le composant Form utilisant la disposition Row/Col.

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`

Propriété	Description	Type	Défaut
`value`	Heure sélectionnée contrôlée	`Date \| null`	`-`
`defaultValue`	Heure sélectionnée par défaut (non contrôlée)	`Date \| null`	`-`
`onChange`	Callback lorsque l’heure est sélectionnée	`(date: Date \| null) => void`	`-`
`format`	Format d’affichage de l’heure (12 heures ou 24 heures)	`'12' \| '24'`	`'24'`
`placeholder`	Texte de placeholder de l’input	`string`	`"Sélectionner une heure"`
`disabled`	Désactiver le sélecteur d’heure	`boolean`	`false`
`size`	Taille de l’input	`'xs' \| 'sm' \| 'md' \| 'lg'`	`'md'`
`showSeconds`	Afficher la colonne des secondes dans le sélecteur d’heure	`boolean`	`false`
`allowClear`	Afficher le bouton de suppression lorsque l’heure est sélectionnée	`boolean`	`true`
`open`	État ouvert contrôlé du menu déroulant	`boolean`	`-`
`onOpenChange`	Callback lorsque l’état ouvert du menu déroulant change	`(open: boolean) => void`	`-`
`hourStep`	Intervalle entre les heures dans le sélecteur	`number`	`1`
`minuteStep`	Intervalle entre les minutes dans le sélecteur	`number`	`1`
`secondStep`	Intervalle entre les secondes dans le sélecteur	`number`	`1`
`status`	Statut de validation	`'error' \| 'warning'`	`-`
`data-testid`	Préfixe d’ID de test pour les éléments enfants	`string`	`"timepicker"`
`className`	Classes CSS supplémentaires	`string`	`-`

Accessibilité

Le champ d’entrée a les attributs aria-haspopup et aria-expanded
Le menu déroulant utilise role="dialog" avec un étiquetage approprié
Les colonnes d’heures utilisent role="listbox" avec aria-label
Les options d’heures utilisent role="option" avec aria-selected
Navigation complète au clavier : touches fléchées pour naviguer, Échap pour fermer, Entrée pour confirmer
Le bouton de suppression a un aria-label pour les lecteurs d’écran
L’état désactivé est correctement communiqué à la technologie d’assistance