Lavorare con le date non è un compito facile. Tuttavia, il pacchetto date-fns semplifica il lavoro con le date in JavaScript.
Immergiamoci nel pacchetto date-fns per rendere la nostra vita più facile di prima. Il pacchetto date-fns è leggero.
Sommario:
Installazione del pacchetto
È necessario configurare il progetto con npm per funzionare con un pacchetto di terze parti. Vediamo rapidamente i passaggi per completare la nostra configurazione.
Presumo che tu abbia installato NodeJS o IDE per esercitarti.
- Passare alla directory desiderata in cui si desidera lavorare.
- Eseguire il comando npm init per inizializzare il progetto.
- Rispondi a tutte le domande in base alle tue preferenze.
- Ora installa date-fns usando il comando seguente
npm install date-fns
- Crea un file chiamato dateFunctions.js
Ora siamo pronti per entrare nel pacchetto date-fns. Andiamo e impariamo alcuni metodi essenziali dal pacchetto.
è valido
Tutte le date non sono valide.
Ad esempio, non esiste una data come 2021-02-30. Come possiamo verificare se la data è valida o meno?
Il metodo è valido dalla data-fns il pacchetto ci aiuterà a scoprire se la data data è valida o meno.
Esaminare se il codice seguente funziona correttamente o meno con la validità delle date.
const { isValid } = require("date-fns");
console.log(isValid(new Date("2021, 02, 30")));
Se esegui il codice sopra, scoprirai che il 30 febbraio 2021 è valido. Oh! Non è.
Perché sta accadendo?
JavaScript converte il giorno extra di febbraio al 1 marzo 2021 che è una data valida. Per confermarlo, stampa la nuova data (“2021, 02, 30”) sulla console.
console.log(new Date("2021, 02, 30"));
Il pacchetto date-fns fornisce un metodo chiamato parse per aggirare questo problema. Il metodo parse analizza la data fornita e restituisce risultati accurati.
Dai un’occhiata al codice qui sotto.
const { isValid, parse } = require("date-fns");
const invalidDate = parse("30.02.2021", "dd.MM.yyyy", new Date());
const validDate = parse("25.03.2021", "dd.MM.yyyy", new Date());
console.log(isValid(invalidDate));
console.log(isValid(validDate));
formato
Uno degli usi di base quando si lavora con le date è formattarle come vogliamo. Formattiamo le date in diversi formati utilizzando il metodo format dal pacchetto date-fns.
Formatta la data come 23-01-1993, 1993-01-23 10:43:55, martedì 23 gennaio 1993, ecc., Esegui il codice seguente per ottenere la data corrispondente nei formati indicati.
const { format } = require("date-fns");
console.log(format(new Date(), "dd-MM-yyyy"));
console.log(format(new Date(), "dd/MM/yyyy HH:mm:ss"));
console.log(format(new Date(), "PPPP"));
Puoi trovare l’elenco completo dei formati qui.
addDays
Il metodo addDays viene utilizzato per impostare una scadenza successiva a un certo numero di giorni.
Semplicemente, possiamo aggiungere giorni a qualsiasi data per ottenere la data del giorno dopo alcuni giorni. Ha molte applicazioni.
Diciamo che hai un compleanno dopo X giorni e sei impegnato in quei giorni. Potresti non ricordare il compleanno nella tua fitta agenda. Puoi semplicemente utilizzare il metodo addDays per avvisarti del compleanno dopo X giorni. Avere il codice.
const { format, addDays } = require("date-fns");
const today = new Date();
// birthday after 6 days
const birthday = addDays(today, 6);
console.log(format(today, "PPPP"));
console.log(format(birthday, "PPPP"));
Simile al metodo addDays ci sono altri metodi come addHours, subHours, addMinutes, subMinutes, addSeconds, subSeconds, subDays, addWeeks, subWeeks, addYears, subYears, ecc., Puoi facilmente indovinare la funzionalità dei metodi con i loro nomi.
Provali.
formatDistanza
Scrivere codice per confrontare le date da zero è un incubo. Perché confrontiamo comunque le date?
Ci sono molte applicazioni in cui hai visto confronti di date. Se prendi siti Web di social media, ci sarà uno slogan che menziona 1 minuto fa, 12 ore fa, 1 giorno fa, ecc., Qui utilizziamo il confronto delle date dalla data e dall’ora del post per presentare la data e l’ora.
Il metodo formatDistance fa la stessa cosa. Restituisce il divario tra le due date date.
Scriviamo un programma per trovare la tua età.
const { formatDistance } = require("date-fns");
const birthday = new Date("1956, 01, 28");
const presentDay = new Date();
console.log(`Age: ${formatDistance(presentDay, birthday)}`);
eachDayOfInterval
Diciamo che devi trovare i nomi e le date dei prossimi X giorni. Il metodo eachDayOfInterval ci aiuta a trovare i giorni tra la data di inizio e quella di fine.
Scopriamo i prossimi 30 giorni da oggi.
const { addDays, eachDayOfInterval, format } = require("date-fns");
const presentDay = new Date();
const after30Days = addDays(presentDay, 30);
const _30Days = eachDayOfInterval({ start: presentDay, end: after30Days });
_30Days.forEach((day) => {
console.log(format(day, "PPPP"));
});
massimo e minimo
I metodi max e min trovano rispettivamente le date massime e minime tra le date indicate. I metodi in date-fns sono molto familiari e facili da indovinare la funzionalità di tali metodi. Scriviamo del codice.
const { min, max } = require("date-fns");
const _1 = new Date("1990, 04, 22");
const _2 = new Date("1990, 04, 23");
const _3 = new Date("1990, 04, 24");
const _4 = new Date("1990, 04, 25");
console.log(`Max: ${max([_1, _2, _3, _4])}`);
console.log(`Min: ${min([_1, _2, _3, _4])}`);
è uguale
Puoi facilmente intuire la funzionalità del metodo isEqual. Come pensi, il metodo isEqual viene utilizzato per verificare se due date sono uguali o meno. Vedere il codice di esempio di seguito.
const { isEqual } = require("date-fns");
const _1 = new Date();
const _2 = new Date();
const _3 = new Date("1900, 03, 22");
console.log(isEqual(_1, _2));
console.log(isEqual(_2, _3));
console.log(isEqual(_3, _1));
Conclusione
Se parliamo di tutti i metodi nel pacchetto date-fns, il completamento richiede giorni. Il modo migliore per imparare qualsiasi pacchetto è familiarizzare con i metodi essenziali da esso e quindi leggere la documentazione per ulteriori informazioni. Applicare lo stesso scenario anche per il pacchetto date-fns.
Hai imparato i metodi essenziali in questo tutorial. Cerca l’utilizzo specifico in documentazione o prendere in considerazione corsi online come JavaScript, jQuery e JSON.
Buona codifica 👨💻