Rango de fechas.

<fieldset class="ui-sample ui-form" data-date-range="true"><legend>Período</legend><label for="date-range-0-from">Desde</label><input class="input" id="date-range-0-from" type="date" value="2026-01-01"/><label for="date-range-0-to">Hasta</label><input class="input" id="date-range-0-to" type="date" value="2026-08-25"/></fieldset>

<fieldset class="ui-sample ui-form border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-date-range="true"><legend>Período</legend><label for="date-range-0-from">Desde</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-range-0-from" type="date" value="2026-01-01"/><label for="date-range-0-to">Hasta</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-range-0-to" type="date" value="2026-08-25"/></fieldset>

import type { ChangeEventHandler } from "react";

export interface DateRangeProps {
  /** Título del grupo. */
  legend?: string;
  /** Prefijo de los ids: los campos usan `${id}-from` y `${id}-to`. Usa uno distinto por rango en la página. */
  id?: string;
  /** Etiqueta del campo inicial del período. */
  fromLabel?: string;
  /** Etiqueta del campo final del período. */
  toLabel?: string;
  /** Nombre del parámetro enviado con la fecha inicial. */
  fromName?: string;
  /** Nombre del parámetro enviado con la fecha final. */
  toName?: string;
  /** Fecha inicial del campo «desde» no controlado, en formato `AAAA-MM-DD`. */
  defaultFrom?: string;
  /** Fecha inicial del campo «hasta» no controlado, en formato `AAAA-MM-DD`. */
  defaultTo?: string;
  /** Fecha «desde» controlada; va junto con `onFromChange`. */
  from?: string;
  onFromChange?: ChangeEventHandler<HTMLInputElement>;
  /** Fecha «hasta» controlada; va junto con `onToChange`. */
  to?: string;
  onToChange?: ChangeEventHandler<HTMLInputElement>;
  /** Primera fecha permitida en ambos campos. */
  min?: string;
  /** Última fecha permitida en ambos campos. */
  max?: string;
  className?: string;
}

/**
 * Par de campos de fecha con título, para filtrar o consultar un período con inicio y término.
 *
 * Cada extremo es controlado sólo si llegan su valor y su `onChange` (`from` + `onFromChange`, `to` + `onToChange`).
 * El navegador muestra las fechas en el formato regional de quien las ve; el valor que se envía es siempre `AAAA-MM-DD`.
 *
 * @example <DateRange id="periodo" legend="Período" defaultFrom="2026-01-01" defaultTo="2026-06-30" />
 * @example <DateRange id="periodo" from={desde} onFromChange={cambiarDesde} to={hasta} onToChange={cambiarHasta} />
 */
export function DateRange({
  legend = "Período",
  id = "date-range-0",
  fromLabel = "Desde",
  toLabel = "Hasta",
  fromName,
  toName,
  defaultFrom = "2026-01-01",
  defaultTo = "2026-08-25",
  from,
  onFromChange,
  to,
  onToChange,
  min,
  max,
  className,
}: DateRangeProps) {
  const desdeId = `${id}-from`;
  const hastaId = `${id}-to`;
  const desde = from !== undefined && onFromChange !== undefined ? { value: from } : { defaultValue: from ?? defaultFrom };
  const hasta = to !== undefined && onToChange !== undefined ? { value: to } : { defaultValue: to ?? defaultTo };
  return (
    <fieldset className={["ui-form", className].filter(Boolean).join(" ")} data-date-range>
      <legend>{legend}</legend>
      <label htmlFor={desdeId}>{fromLabel}</label>
      <input className="input" id={desdeId} name={fromName} type="date" min={min} max={max} onChange={onFromChange} {...desde} />
      <label htmlFor={hastaId}>{toLabel}</label>
      <input className="input" id={hastaId} name={toName} type="date" min={min} max={max} onChange={onToChange} {...hasta} />
    </fieldset>
  );
}