Εργασία με Dates Χρησιμοποιώντας το date-fns σε JavaScript

Η εργασία με ημερομηνίες δεν είναι εύκολη υπόθεση. Ωστόσο, το πακέτο date-fns διευκολύνει την εργασία με τις ημερομηνίες στο JavaScript.

Ας εμβαθύνουμε στο πακέτο date-fns για να κάνουμε τη ζωή μας πιο εύκολη από πριν. Το πακέτο date-fns είναι ελαφρύ.

Πίνακας περιεχομένων

Εγκατάσταση του πακέτου

Πρέπει να ρυθμίσουμε το έργο με το npm για να λειτουργήσουμε με ένα πακέτο τρίτων. Ας δούμε γρήγορα τα βήματα για να ολοκληρώσουμε τη ρύθμισή μας.

Υποθέτω ότι έχετε εγκαταστήσει το NodeJS ή το IDE για να το εξασκήσετε.

Μεταβείτε στον επιθυμητό κατάλογο στον οποίο θέλετε να εργαστείτε.
Εκτελέστε την εντολή npm init για να αρχικοποιήσετε το έργο.
Απαντήστε σε όλες τις ερωτήσεις με βάση τις προτιμήσεις σας.
Τώρα, εγκαταστήστε το date-fns χρησιμοποιώντας την παρακάτω εντολή

npm install date-fns

Δημιουργήστε ένα αρχείο που ονομάζεται dateFunctions.js

Τώρα, είμαστε έτοιμοι να μεταβούμε στο πακέτο date-fns. Πάμε να μάθουμε μερικές βασικές μεθόδους από το πακέτο.

είναι έγκυρο

Όλες οι ημερομηνίες δεν είναι έγκυρες.

Για παράδειγμα, δεν υπάρχει ημερομηνία όπως το 2021-02-30. Πώς μπορούμε να ελέγξουμε αν η ημερομηνία είναι έγκυρη ή όχι;

Η μέθοδος isValid από την ημερομηνία-fns του πακέτου θα μας βοηθήσει να βρούμε αν η δεδομένη ημερομηνία είναι έγκυρη ή όχι.

Εξετάστε αν ο παρακάτω κωδικός λειτουργεί καλά ή όχι με την εγκυρότητα των ημερομηνιών.

const { isValid } = require("date-fns");

console.log(isValid(new Date("2021, 02, 30")));

Εάν εκτελέσετε τον παραπάνω κωδικό, τότε θα διαπιστώσετε ότι η 30η Φεβρουαρίου 2021 είναι έγκυρη. Ω! Δεν είναι.

Πώς να απενεργοποιήσετε τη δόνηση σε ένα iPhone

Γιατί συμβαίνει;

Η JavaScript μετατρέπει την επιπλέον ημέρα του Φεβρουαρίου στην 1η Μαρτίου 2021 που είναι έγκυρη ημερομηνία. Για να το επιβεβαιώσετε, εκτυπώστε νέα Ημερομηνία (“2021, 02, 30”) στην κονσόλα.

console.log(new Date("2021, 02, 30"));

Το πακέτο date-fns παρέχει μια μέθοδο που ονομάζεται ανάλυση για να επιλύσετε αυτό το πρόβλημα. Η μέθοδος ανάλυση αναλύει την ημερομηνία που έχετε δώσει και επιστρέφει ακριβή αποτελέσματα.

Ρίξτε μια ματιά στον παρακάτω κώδικα.

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));

μορφή

Μία από τις βασικές χρήσεις κατά την εργασία με ημερομηνίες είναι να τις μορφοποιούμε όπως θέλουμε. Μορφοποιούμε τις ημερομηνίες σε διαφορετικές μορφές χρησιμοποιώντας τη μέθοδο μορφοποίησης από το πακέτο date-fns.

Μορφοποιήστε την ημερομηνία ως 23-01-1993, 1993-01-23 10:43:55, Τρίτη, 23 Ιανουαρίου 1993, κ.λπ.. Εκτελέστε τον παρακάτω κωδικό για να λάβετε την αντίστοιχη ημερομηνία στις αναφερόμενες μορφές.

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"));

Μπορείτε να βρείτε την πλήρη λίστα των μορφών εδώ.

addDays

Η μέθοδος addDays χρησιμοποιείται για να ορίσετε μια προθεσμία που είναι μετά από κάποιο αριθμό ημερών.

Απλώς, μπορούμε να προσθέσουμε ημέρες σε οποιαδήποτε ημερομηνία για να λάβουμε την ημερομηνία της ημέρας μετά από μερικές ημέρες. Έχει πολλές εφαρμογές.

Τα πιο τρομακτικά παιχνίδια και οι καλύτερες προσφορές που μπορείτε να πάρετε

Ας υποθέσουμε ότι έχετε γενέθλια μετά από Χ ημέρες και είστε απασχολημένοι αυτές τις μέρες. Μπορεί να μην θυμάστε τα γενέθλια στο πολυάσχολο πρόγραμμά σας. Μπορείτε απλώς να χρησιμοποιήσετε τη μέθοδο addDays για να σας ειδοποιήσουμε για τα γενέθλια μετά από X ημέρες. Να έχετε τον κωδικό.

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"));

Παρόμοια με τη μέθοδο addDays υπάρχουν και άλλες μέθοδοι όπως addHours, subHours, addMinutes, SubMinutes, addSeconds, Subseconds, SubDays, addWeeks, subWeeks, addYears, subYears κ.λπ.. Μπορείτε εύκολα να μαντέψετε τη λειτουργικότητα των μεθόδων με τα ονόματά τους.

Δοκιμάστε τα.

μορφή Απόσταση

Το να γράφεις κώδικα για να συγκρίνεις ημερομηνίες από την αρχή είναι ένας εφιάλτης. Γιατί ούτως ή άλλως συγκρίνουμε ημερομηνίες;

Υπάρχουν πολλές εφαρμογές όπου έχετε δει συγκρίσεις ημερομηνιών. Εάν χρησιμοποιείτε ιστότοπους μέσων κοινωνικής δικτύωσης, θα υπάρχει μια περιγραφή που θα αναφέρει πριν από 1 λεπτό, πριν από 12 ώρες, πριν από 1 ημέρα κ.λπ.. Εδώ, χρησιμοποιούμε τη σύγκριση ημερομηνιών από την ημερομηνία και την ώρα της ανάρτησης μέχρι την παρούσα ημερομηνία και ώρα.

Η μέθοδος formatDistance κάνει το ίδιο πράγμα. Επιστρέφει το κενό μεταξύ των δύο δεδομένων ημερομηνιών.

Ας γράψουμε ένα πρόγραμμα για να βρούμε την ηλικία σας.

const { formatDistance } = require("date-fns");

const birthday = new Date("1956, 01, 28");
const presentDay = new Date();

console.log(`Age: ${formatDistance(presentDay, birthday)}`);

everyDayOfInterval

Ας υποθέσουμε ότι πρέπει να βρείτε ονόματα και ημερομηνίες για τις επόμενες X ημέρες. Η μέθοδος everyDayOfInterval μας βοηθά να βρούμε τις ημέρες μεταξύ της ημερομηνίας έναρξης και λήξης.

Πώς να μορφοποιήσετε αυτόματα μια λέξη ή μια φράση στο MS Word

Ας μάθουμε τις επόμενες 30 ημέρες από σήμερα.

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"));
});

μέγ. και ελάχ

Οι μέθοδοι max και min βρίσκουν τις μέγιστες και ελάχιστες ημερομηνίες μεταξύ των δεδομένων ημερομηνιών αντίστοιχα. Οι μέθοδοι στο date-fns είναι πολύ γνωστές και είναι εύκολο να μαντέψει κανείς τη λειτουργικότητα αυτών των μεθόδων. Ας γράψουμε λίγο κώδικα.

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])}`);

είναι ίσο

Μπορείτε εύκολα να μαντέψετε τη λειτουργικότητα της μεθόδου isEqual. Όπως νομίζετε, η μέθοδος isEqual χρησιμοποιείται για να ελέγξει εάν δύο ημερομηνίες είναι ίσες ή όχι. Δείτε το δείγμα κώδικα παρακάτω.

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));

συμπέρασμα

Αν μιλάμε για κάθε μέθοδο στο πακέτο date-fns, τότε χρειάζονται μέρες για να ολοκληρωθεί. Ο καλύτερος τρόπος για να μάθετε οποιοδήποτε πακέτο είναι να εξοικειωθείτε με τις βασικές μεθόδους από αυτό και στη συνέχεια να διαβάσετε την τεκμηρίωση για περισσότερες πληροφορίες. Εφαρμόστε το ίδιο σενάριο και για το πακέτο date-fns.

Έχετε μάθει τις βασικές μεθόδους σε αυτό το σεμινάριο. Αναζητήστε τη συγκεκριμένη χρήση στο τεκμηρίωση ή εξετάστε το ενδεχόμενο να παρακολουθήσετε διαδικτυακά μαθήματα όπως JavaScript, jQuery και JSON.

Καλή Κωδικοποίηση 👨‍💻