Skip to content

Selector de fecha

Selecciona una fecha o un intervalo. El panel va a body (position: fixed) para no quedar bajo TOC/menús. Presets = Dropdown aparte.

Preview principal

DATEPICKERportal · ESC · fuera
12 feb 2024 — 3 mar 2024 · mode=range

Rango

Primer clic = inicio, segundo = fin (se normaliza si van al revés).

Simple

Una fecha; cierra al elegir.

Presets

No son parte de DatePicker: Dropdown + onChange del rango.

Uso

Section titled “Uso”
import { useState } from "react";
import { DatePicker } from "devsoftec-ui";


function Ejemplo() {
  const [range, setRange] = useState<{ from: Date; to: Date } | null>(null);


  return (
    <DatePicker
      mode="range"
      value={range}
      onChange={(v) => {
        if (v && typeof v === "object" && "from" in v) setRange(v);
      }}
    />
  );
}

Props

Section titled “Props”
Prop Tipo Default Descripción
mode single | range range Una fecha o intervalo
value Date | { from, to } | null null Valor controlado
onChange (v) => void — Al confirmar selección
placeholder string i18n Vacío
className string — Clase extra

Comportamiento

Section titled “Comportamiento”
  • Portal a document.body + z-index alto
  • Si no hay espacio abajo, abre hacia arriba
  • Semana empieza en lunes
  • Range: 1.º clic inicio, 2.º clic fin (orden normalizado)
  • Single: un clic selecciona y cierra
  • Cierra con ESC o clic fuera