# DateTimePicker

> Fecha y hora en un solo campo: un DatePicker y un TimePicker pegados, con el valor en un `Date`.

```tsx
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.

```tsx
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

### 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

| Tecla | Qué hace |
|---|---|
| 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

[date-picker](/docs/components/date-picker.md) · [time-picker](/docs/components/time-picker.md) · [calendar](/docs/components/calendar.md)