Selector de fecha.

<div class="ui-sample ui-form"><label for="date-picker-0">Fecha de publicación</label><input class="input" id="date-picker-0" type="date" min="2026-01-01" max="2026-12-31" value="2026-08-25"/></div>

<div class="ui-sample ui-form border border-slate-300 bg-white p-4 text-slate-950"><label for="date-picker-0">Fecha de publicación</label><input class="input border border-slate-400 bg-white px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2" id="date-picker-0" type="date" min="2026-01-01" max="2026-12-31" value="2026-08-25"/></div>

import type { ChangeEventHandler } from "react";

export interface DatePickerProps {
  /** Etiqueta visible del campo. */
  label?: string;
  /** Id del campo. Usa uno distinto por campo en la página. */
  id?: string;
  name?: string;
  /** Primera fecha permitida, en formato `AAAA-MM-DD`. */
  min?: string;
  /** Última fecha permitida, en formato `AAAA-MM-DD`. */
  max?: string;
  /** Fecha inicial de un campo no controlado, en formato `AAAA-MM-DD`. */
  defaultValue?: string;
  /** Fecha de un campo controlado; va junto con `onChange`. */
  value?: string;
  onChange?: ChangeEventHandler<HTMLInputElement>;
  disabled?: boolean;
  /** Texto de ayuda bajo el campo, por ejemplo el rango permitido en palabras; se enlaza con `aria-describedby` y usa el id `${id}-help`. */
  help?: string;
  className?: string;
}

/**
 * Campo de fecha con etiqueta y límites, para elegir un día con el calendario del navegador.
 *
 * El navegador muestra la fecha en el formato regional de quien la ve; el valor que se envía es siempre `AAAA-MM-DD`.
 *
 * @example <DatePicker id="publicacion" label="Fecha de publicación" min="2026-01-01" max="2026-12-31" defaultValue="2026-08-25" />
 * @example <DatePicker id="termino" label="Término del contrato" min="2026-10-01" max="2027-12-31" defaultValue="" help="Entre el 1 de octubre de 2026 y el 31 de diciembre de 2027." />
 */
export function DatePicker({
  label = "Fecha de publicación",
  id = "date-picker-0",
  name,
  min = "2026-01-01",
  max = "2026-12-31",
  defaultValue = "2026-08-25",
  value,
  onChange,
  disabled,
  help,
  className,
}: DatePickerProps) {
  const controlado = value !== undefined && onChange !== undefined;
  const ayudaId = help ? `${id}-help` : undefined;
  return (
    <div className={["ui-form", className].filter(Boolean).join(" ")}>
      <label htmlFor={id}>{label}</label>
      <input
        className="input"
        id={id}
        name={name}
        type="date"
        min={min}
        max={max}
        disabled={disabled}
        aria-describedby={ayudaId}
        onChange={onChange}
        {...(controlado ? { value } : { defaultValue: value ?? defaultValue })}
      />
      {help ? <small id={ayudaId}>{help}</small> : null}
    </div>
  );
}