Campi Filtro

DateRange

Coppia di datepicker Da/A con due chiavi separate nel model.

Panoramica

Due datepicker affiancati (Da / A) che scrivono su chiavi separate nel model. Occupa 2 colonne grid. Genera gte.dataFrom e lte.dataTo combinati in and=(...).

Anteprima live

Tipo

type: 'daterange'

Configurazione

import type { DateRangeFieldConfig } from '@pzeta/vue-ricerca'

const field: DateRangeFieldConfig = {
  key: 'datacreazione',       // usata solo per la colonna PostgREST
  type: 'daterange',
  label: 'Data creazione',
  keyFrom: 'dataCreazioneDa', // chiave nel model per "Da"
  keyTo: 'dataCreazioneA',    // chiave nel model per "A"
  placeholderFrom: 'Dal...',
  placeholderTo: 'Al...',
  dateFormat: 'dd/mm/yy',
  showButtonBar: true,
}

key non viene scritto nel model per daterange: i valori vengono scritti su keyFrom e keyTo. key è usato solo come riferimento per la colonna PostgREST (se non configurata esplicitamente in postgrest.column).

Props specifiche

Prop	Tipo	Default	Descrizione
`key`	`string`	—	Chiave di riferimento per la colonna PostgREST
`keyFrom`	`string`	—	Chiave nel model per la data inizio
`keyTo`	`string`	—	Chiave nel model per la data fine
`label`	`string`	—	Label visualizzata sopra i due campi
`placeholderFrom`	`string`	—	Placeholder campo "Da"
`placeholderTo`	`string`	—	Placeholder campo "A"
`dateFormat`	`string`	`'dd/mm/yy'`	Formato data
`showButtonBar`	`boolean`	`false`	Barra pulsanti Oggi/Cancella

Query PostgREST generata

// Con entrambi i valori → and combinato
// filters = { dataCreazioneDa: new Date('2024-01-01'), dataCreazioneA: new Date('2024-12-31') }
// { and: '(datacreazione.gte.2024-01-01,datacreazione.lte.2024-12-31)' }

// Solo Da
// { datacreazione: 'gte.2024-01-01' }

// Solo A
// { datacreazione: 'lte.2024-12-31' }

Date

Selettore data singola con formato configurabile.

Number

Input numerico con formattazione locale e supporto valuta.