componente · @solu30/ui-kit/input

DateRangePicker

Selector de rango de fechas con dos meses a la vista y atajos para los rangos más usados.

Seguir leyendo — 2 párrafos más

DateRangePicker

Dual-month visual calendar range picker with preset shortcuts. Renders a trigger button showing the selected range; click opens a dropdown portalled to document.body with viewport-clamped floating position so it never clips inside Sheets, Dialogs, or overflow:hidden ancestors.

3 sitios de import en 2 de 15 verticales — un archivo que la importa cuenta una vez, monte una instancia o veinte.

cmp-packages
gestorsalon

El componente, montado

Cargando el espécimen…

export function DateTimeMatrix() {
  const [pickupDate, setPickupDate] = useState<Date | undefined>(new Date(2026, 7, 22))
  const [range, setRange] = useState<DateRangeValue>({
    from: new Date(2026, 7, 20),
    to: new Date(2026, 7, 22),
  })
  const [boardingTime, setBoardingTime] = useState('09:30')

  return (
    <Stage label="Calendar, DateRangePicker y TimePicker" tall wide>
      <div className="grid w-full grid-cols-1 gap-4 sm:grid-cols-3">
        <Calendar
          mode="single"
          selected={pickupDate}
          onSelect={setPickupDate}
          disabled={{ before: new Date(2026, 7, 19) }}
        />
        <div className="flex flex-col gap-3">
          <div className="flex flex-col gap-1.5">
            <Label>Rango de reserva del salón</Label>
            <DateRangePicker
              value={range}
              onChange={setRange}
              presets={[
                { label: 'Este fin de semana', from: new Date(2026, 7, 22), to: new Date(2026, 7, 23) },
              ]}
            />
            <span className="text-xs text-content/50">
              Sin disabled ni error: no bloquea fechas tomadas ni marca un rango inválido —
              KIT-023.
            </span>
          </div>
          <div className="flex flex-col gap-1.5">
            <Label>Hora de embarque</Label>
            <TimePicker value={boardingTime} onChange={setBoardingTime} minuteStep={15} />
          </div>
          <div className="flex flex-col gap-1.5">
            <Label>Hora de cierre de cocina</Label>
            <TimePicker value="23:00" onChange={() => {}} disabled />
          </div>
        </div>
      </div>
    </Stage>
  )
}

De specimens/input.tsx · DateTimeMatrix: el espécimen del Muestrario, no un ejemplo oficial del paquete. Muestra cómo se usa la pieza de verdad, montada contra los tipos instalados —eso es lo que vale— pero no es documentación del kit.

Cómo se usa

import { DateRangePicker } from '@solu30/ui-kit/input'

Props

8 props declaradas en los tipos de la versión instalada.
Prop	Requerida	Tipo	Qué hace
value	sí	`DateRangeValue`	—
onChange	sí	`(range: DateRangeValue) => void`	—
presets	opcional	`DateRangePresetOption[]`	Preset shortcut buttons shown below the calendars
formatDate	opcional	`(date: Date) => string`	Override date formatting. Receives a Date, returns display string
monthNames	opcional	`[string, string, string, string, string, string, string, string, string, string, string, string]`	Month names (12 items, Jan → Dec)
dayNames	opcional	`[string, string, string, string, string, string, string]`	Day names (7 items, Dom → Sáb or Mon → Sun)
startOnSunday	opcional	`boolean`	Whether week starts on Sunday (default: true to match Spanish locale)
className	opcional	`string`	Extra class on trigger button

Ejemplo del paquete

import { DateRangePicker } from "@solu30/ui-kit";

const [range, setRange] = useState<DateRangeValue>({ from: null, to: null });

<DateRangePicker
  value={range}
  onChange={setRange}
  presets={[
    { label: "Última semana", from: subDays(new Date(), 7), to: new Date() },
    { label: "Último mes", from: startOfMonth(new Date()), to: new Date() },
  ]}
/>

Del @example del JSDoc de @solu30/ui-kit, sin editar: son 65 de los 541 símbolos. La sangría y los renglones en blanco son los del paquete.