TimeField

TimeField renderiza un <input type="time"> y emite el valor seleccionado como una cadena en formato HH:mm o HH:mm:ss según el navegador y el step. La prop step controla el intervalo de tiempo entre valores seleccionables (en segundos).

Props

| Prop | Tipo | Requerido | Por defecto | Descripción | |------|------|-----------|-------------|-------------| | value | string | No | — | Valor de hora actual en formato HH:mm o HH:mm:ss. | | onChange | (value: string) => void | Sí | — | Llamado con la nueva cadena de hora cuando el usuario cambia el valor. | | label | string | No | — | Etiqueta mostrada sobre el input. | | description | string | No | — | Texto de ayuda mostrado debajo del input. | | step | number | No | — | Intervalo en segundos entre valores de tiempo seleccionables (ej. 60 para intervalos de 1 minuto, 1800 para intervalos de 30 minutos). | | containerStyle | React.CSSProperties | No | — | Estilos del div contenedor raíz. | | inputStyle | React.CSSProperties | No | — | Estilos aplicados directamente al elemento <input>. | | labelStyle | React.CSSProperties | No | — | Estilos del elemento de etiqueta. | | descriptionStyle | React.CSSProperties | No | — | Estilos del párrafo de descripción. | | className | string | No | — | Clase CSS del contenedor raíz. | | id | string | No | — | Atributo id del contenedor raíz. |

Uso

Básico

import React, { useState } from 'react';
import TimeField from '@/components/fields/TimeField';

export default function Example() {
  const [time, setTime] = useState('');

  return (
    <TimeField
      label="Hora de inicio"
      value={time}
      onChange={setTime}
    />
  );
}

Con intervalos de 30 minutos

<TimeField
  label="Hora del turno"
  value={appointmentTime}
  onChange={setAppointmentTime}
  step={1800}
  description="Seleccioná un horario en intervalos de 30 minutos."
/>