Formularios

Estado: Beta

Selector de fechas

Para los filtros de reportes del admin y para elegir una fecha. El disparador dice el rango en español ("1 – 30 sep 2026") y abre un panel anclado con atajos (Hoy, Últimos 7 días, Este mes…) y el calendario: dos meses en escritorio, uno en el teléfono. El inicio y el fin son pastillas que viajan con resorte, la franja une el rango y, al elegir el segundo día, una vista previa sigue al cursor. Los valores viajan en inputs ISO con los nombres de siempre (start_date / end_date).

Ingresos, asistencia y alumnos nuevos de esos días.

app/views/… (la demo de arriba)

<%# El filtro de reportes: manda start_date / end_date (ISO) como los dos date_field de antes. %>
<% today = Date.current %>
<div class="grid w-full max-w-xs gap-5">
  <%= render Ui::DateRangePickerComponent.new(label: "Periodo del reporte", value: (today - 29)..today, max: today,
        hint: "Ingresos, asistencia y alumnos nuevos de esos días.") %>
  <%= render Ui::DateRangePickerComponent.new(label: "Fecha del taller", mode: :single, name: "event[date]", value: today + 19, min: today,
        presets: [ :today, :tomorrow, [ "En una semana", today + 7 ], [ "En un mes", today.next_month ] ]) %>
</div>

Qué hace

  • El panel es un popover nativo anclado con eclipse_ui/anchor; se voltea si no cabe y ninguna tabla lo recorta.
  • Pastillas de inicio y fin con resorte; franja del rango y vista previa punteada al elegir el segundo día.
  • Atajos con una pastilla que sigue al cursor; el activo queda marcado.
  • Dispara change en los inputs y date-range-picker:change con { start, end }.
  • Meses y días salen de I18n (config/locales/es.yml).

Props

Nombre Tipo Default Descripción
label String — Etiqueta (Ui::FieldComponent); el disparador se anuncia como "Etiqueta: rango".
mode :range | :single :range Un periodo (dos fechas) o un solo día.
value Range | [Date, Date] | Date nil Lo elegido al cargar (Date o ISO). Con form, sale del modelo.
start_name / end_name String "start_date" / "end_date" Nombres de los inputs del periodo.
name String "date" Nombre del input en modo :single.
form / attribute FormBuilder / Symbol | [Symbol, Symbol] nil Con el form builder: un atributo (single) o dos (range).
min / max Date nil Días fuera quedan deshabilitados; los atajos se recortan (con max: hoy, "Este año" termina hoy).
presets [Symbol | [label, inicio, fin]] | false hoy, 7, 30, 90 días, este mes, mes pasado, este año Atajos; en :single no hay por defecto.
auto_submit Boolean false Envía el formulario (requestSubmit, Turbo) al elegir (submit_on_change: es su nombre anterior).
today Date Date.current El hoy del estudio (zona horaria de la app).
hint / error / required / hide_label — — Los de Ui::FieldComponent; required quita "Limpiar".

Accesibilidad