Todos los componentes (244)

Fecha y hora

Fechas y hora · DateTimePicker · .amset-datetime

Qué es y cuándo usarlo

La fecha y la hora juntas, en un solo campo: el calendario de DatePicker y los segmentos de TimeField dentro de un grupo con nombre. El valor es una sola cadena, 2026-10-15T09:30, que es lo que entiende un <input type="datetime-local">, el servidor y new Date.

Cuándo usarlo

Una cita, un vencimiento, el inicio de un turno: cualquier cosa que ocurre en un día y a una hora.
Solo se avisa con la fecha y la hora enteras (onChange): media fecha no es un valor.
min y max (mismo formato) acotan los días; isDateUnavailable apaga días sueltos (festivos, días completos).
Con name viaja en un formulario nativo como un único campo.

Cuándo no

Solo el día: DatePicker. Solo la hora: TimeField. Un hueco dentro de una agenda: SlotPicker.
Un periodo (de-a): DateRangePicker.

Teclado: el de cada parte: los segmentos se escriben y se mueven con las flechas, el calendario se abre con su botón. Un grupo fieldset con su leyenda lo une para el lector de pantalla.

Accesibilidad: el nombre del grupo es la etiqueta; «Fecha» y «Hora» nombran cada parte. Al salir del grupo con solo una de las dos, un role="alert" dice qué falta. El error del servidor (error) manda sobre el que calcula el campo.

Aspecto fino: --amset-datetime-gap (hueco entre fecha y hora), más las variables de los campos (--amset-field-*) y del calendario (--amset-calendar-*).

Cómo se ve

Recogida en tienda

Fecha

20112026

Hora

1730

De lunes a sábado

Recogida elegida: 2026-11-20, 17:30.

Entrega (a partir de hoy)

Fecha

ddmmaaaa

Hora

––––

<DateTimePicker label="Recogida en tienda" value={valor} onChange={setValor} hint="De lunes a sábado" />
<DateTimePicker label="Entrega (a partir de hoy)" value={vacio} onChange={setVacio} min="2026-10-20T00:00" required />

Props

Se importa con import { DateTimePicker } from '@amset/ui'. Las obligatorias van marcadas.

Prop	Tipo	Para qué sirve
`label`obligatoria	`string`	Obligatoria: nombra el grupo de los dos campos.
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`disabled`	`boolean`	—
`error`	`string`	Error de fuera (del servidor). Manda sobre el que calcula el campo.
`firstDayOfWeek`	`FirstDayOfWeek`	—
`granularity`	`"minute" \| "second"`	Hasta donde llega la hora: `minute` (por defecto) o `second`.
`hint`	`string`	—
`initialValue`	`string \| null`	El valor al empezar, sin controlarlo desde fuera.
`isDateUnavailable`	`(date: PlainDate) => boolean`	—
`max`	`string`	Lo ultimo que se acepta, en el mismo formato; igual que `min`, con hora si la lleva.
`min`	`string`	Lo primero que se acepta, en el mismo formato. Con solo `AAAA-MM-DD` se mira el dia; con `AAAA-MM-DDTHH:MM` tambien la hora. Un valor anterior se marca no valido y no se avisa por `onChange`.
`minuteStep`	`number`	De cuantos en cuantos minutos se admite la hora, como `minuteStep` de `TimeField`.
`name`	`string`	Para que viaje en un formulario nativo, como un unico campo.
`onChange`	`(value: string) => void`	Solo se avisa con una fecha Y una hora enteras: `AAAA-MM-DDTHH:MM` (con `:SS` si `granularity` es `second`).
`onClear`	`() => void`	Se avisa al pasar de un valor entero a no tenerlo (se borra un trozo).
`readOnly`	`boolean`	—
`required`	`boolean`	—
`size`	`"sm" \| "md" \| "lg"`	—
`value`	`string \| null`	La fecha y la hora juntas, `AAAA-MM-DDTHH:MM`, controladas desde fuera. `null` es vacio.
`variant`	`FieldVariant`	—

Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.

Mandos

Estas variables CSS son la forma de adaptarlo. Se declaran sobre el selector del componente, no en :root: la hoja las redeclara en la propia regla y una declaración en el mismo elemento gana siempre.

Variable	Por defecto
`--amset-datetime-gap`	`var(--amset-space-3)`

Cómo se cambia

.amset-datetime {
  --amset-datetime-gap: ...;
}

En el banco de pruebas

Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: