Quasar continua ad essere la mia prima scelta quando inizio un nuovo progetto. I suoi componenti sono completi e flessibili, ma ogni tanto trovo qualche mancanza.
Mi sono trovato ad avere la necessità di usare in una form un input di tipo date
〈q-input v-model="dataDiOggi" type="date"〉
e ho provato ad assegnargli un valore di default scrivendo
dataDiOggi = new Date()
Con mia grande sorpresa, il campo non si valorizzava: ho così scoperto, dopo una breve ricerca, che questo tipo di campo, nonostante la presenza di un datepicker, gestisce solo stringhe, e non oggetti javascript Date.
Da una parte è una scelta comprensibile, perché nella grande maggioranza dei casi, il valore che noi andiamo ad usare e registrare, sarà una rappresentazione della data formattata come stringa, ma dall’altra non potevo accettare che il mio new Date() non funzionasse.
Così ho deciso di scrivere un piccolo componente che funzionasse con date pure.
Ho innanzitutto fatto creare il nuovo componente alla CLI di quasar:
quasar new component QInputDate
poi sono andato ad editare il file src/components/QInputDate.vue
Il template html è molto semplice, contiene solo il nostro q-input, che quasar ci fornisce già perfetto e pronto all’uso.
Per quanto riguarda le funzionalità, ho scritto il codice seguendo i pattern usati da Vue 3: la nuova composition api, e il flusso props down, events up.
Importo alcune classi base, fra cui date di quasar, una potente utility che permette di manipolare le date javascript senza installare dipendenze esterne come Moment.js
import { defineComponent, computed } from 'vue' import { date } from 'quasar'
Il resto del componente è definito così:
Da notare che la prop modelValue non ha un nome scelto a caso: modelValue è il nome interno che vue assegna alla proprietà v-model. Per cui, l’implementazione di questo mio nuovo componente sarà semplicemente
〈q-input-date v-model="searchDate" /〉
Nella mia funzione setup (composition api) definisco una proprietà computed, scrivendo i metodi di set e get. Nella get trasformo la prop modelValue (data) in una stringa, così che il campo di testo venga correttamente valorizzato.
Nella funzione set invece emetto un evento di update della prop modelValue, con un oggetto data come valore.
In questo modo, ogni volta che il valore dell’input verrà cambiato, verrà aggiornato anche il valore del v-model.
