sebs7n-ui

Formularios

import { DateTimePicker } from "sebs7n-ui/date-time-picker"

Ejemplos

Básico

La fecha y la hora en un solo campo. Elegir otro día conserva la hora.

import { DateTimePicker } from "sebs7n-ui/date-time-picker"
import { useState } from "react"

function Basic() {
  const [dueAt, setDueAt] = useState<Date | null>(new Date(2026, 8, 30, 18, 0))
  return (
    <div className="flex w-full max-w-sm flex-col gap-2">
      <span className="text-callout text-label" id="invoice-due">
        Vencimiento de la factura
      </span>
      <DateTimePicker aria-labelledby="invoice-due" clearable name="due-at" onValueChange={setDueAt} value={dueAt} />
    </div>
  )
}

Props

Generadas del TypeScript del paquete. Las propias del componente, más las heredadas del primitivo que tienen algo que explicar —marcadas «heredada de Base UI»—. El resto está en la línea «hereda de».

DateTimePicker

Prop	Tipo	Por defecto	Descripción
`aria-describedby`	`string`	—	El `id` de una ayuda para el grupo. Dentro de un `Field`, la ayuda y el error del campo se suman solos.
`aria-label`	`string`	—	Nombre accesible del elemento.
`aria-labelledby`	`string`	—	El `id` del elemento que nombra el campo.
`clearable`	`boolean`	`false`	Un «Limpiar» al pie del calendario: vacía la fecha y la hora.
`defaultValue`	`Date`	`null`	La fecha y hora al montar, sin controlar.
`disabled`	`boolean`	—	Apaga la fecha y la hora.
`id`	`string`	—	El `id` de la parte de la fecha, para un `<Label htmlFor>`.
`labels`	`Partial<Labels["dateTimePicker"]>`	—	Textos: `time` (el nombre de la hora). El resto son los de `datePicker`, `calendar` y `timePicker`.
`locale`	`string`	—	El idioma de la fecha y del calendario. Por defecto, `es-AR`.
`max`	`Date`	—	El último día que se puede elegir.
`min`	`Date`	—	El primer día que se puede elegir.
`name`	`string`	—	El nombre en el formulario: `2026-09-29T09:30`, hora local sin zona horaria (como `datetime-local`).
`onValueChange`	`(value: Date \| null) => void`	—	Avisa la fecha y hora elegidas, o `null` al limpiar.
`required`	`boolean`	`false`	Sin fecha no se puede enviar: dentro de un `Form`, el campo queda inválido y `Form` enfoca la fecha.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	28, 36 (default) o 40, como los campos.
`step`	`number`	—	Cada cuántos minutos hay una hora en la lista. Por defecto, 15.
`value`	`Date`	—	La fecha y hora elegidas. `null` es ninguna. Pasarlo lo vuelve controlado.
`className`	`string`	—	Clases del contenedor.

Teclado

Tab: Pasa de la fecha a la hora.
Enter · Espacio: En la fecha, abre el calendario. Ver DatePicker.
0–9 · ↓ / ↑ · Enter: En la hora, tipean o eligen. Ver TimePicker.

Accesibilidad

Es un role="group": el nombre del campo va en el grupo (aria-label o aria-labelledby). La fecha se lee por su texto y la hora se llama «Hora» (labels.time).
Con id, un <Label htmlFor> apunta a la fecha.

Reglas de uso

Dentro de un Field se registra el grupo entero: FieldLabel lo nombra, FieldDescription y FieldError lo describen y con el name del Field viaja «2026-09-29T09:30» (también en onFormSubmit). Con required, sin fecha Form no envía y enfoca la fecha.
Para un momento: un vencimiento con hora, un recordatorio. Para una hora sola, TimePicker; para un día, DatePicker.
Elegir el día conserva la hora; sin hora, el día arranca a las 00:00. Una hora elegida antes que el día espera al día.
Con name viaja como 2026-09-29T09:30, el formato de <input type="datetime-local">: la hora local del navegador sin zona horaria. El servidor no sabe de qué zona es, y si corre en UTC new Date("2026-09-29T09:30") ahí es otro instante. Para guardar un instante, mandá la zona en otro campo o usá onValueChange con toISOString().
clearable vacía fecha y hora desde el pie del calendario.
Solo por subpath (sebs7n-ui/date-time-picker): no está en el barrel, por peso.

Relacionados

DatePicker TimePicker Calendar