Date range

Dos fechas, Desde y Hasta, que se pueden teclear, y un calendario: el primer día elegido es el inicio y el segundo el fin (si es anterior, pasa a ser el nuevo inicio), con el tramo en vista previa mientras falta el fin. Los periodos rápidos lo resuelven en un clic. Aquí el periodo no puede pasar de un año: una vez elegido el inicio, los días más allá no se pueden marcar como fin.

Angular

Vue

Periodo del extracto

Desde

Hasta

Formato: dd/mm/aaaa

Periodo: … → …

<flt-date-range-picker label="Periodo del extracto" [maxDays]="366" required [(value)]="period" />
<!-- value: { start: '2026-10-01', end: '2026-10-23' } -->

<FltDateRangePicker v-model="period" label="Periodo del extracto" :max-days="366" required />
<!-- v-model: { start: '2026-10-01', end: '2026-10-23' } -->

Periodos rápidos propios

presets sustituye los de la librería (últimos 7 y 30 días, mes anterior, últimos 3 meses y este año) por los del consumidor; aquí, los trimestres del año en curso. Con presets vacío no se muestra ninguno.

Angular

Vue

Trimestre fiscal

Desde

Hasta

Formato: dd/mm/aaaa

Periodo: … → …

<flt-date-range-picker label="Trimestre fiscal" [presets]="quarters" [(value)]="quarter" />

quarters = [
  { id: 'q1', label: 'T1', period: (today) => ({ start: '2026-01-01', end: '2026-03-31' }) },
  ...
];

<FltDateRangePicker v-model="quarter" label="Trimestre fiscal" :presets="quarters" />