Η βιβλιοθήκη Day.js διευκολύνει τον χειρισμό των λειτουργιών ημερομηνίας και ώρας στις εφαρμογές React.

Η διαχείριση ημερομηνίας και ώρας είναι ζωτικής σημασίας για κάθε εφαρμογή και το React δεν αποτελεί εξαίρεση. Ενώ η JavaScript παρέχει ενσωματωμένες λειτουργίες χειρισμού ημερομηνίας και ώρας, μπορεί να είναι δυσκίνητες. Ευτυχώς, πολλές βιβλιοθήκες τρίτων μπορούν να απλοποιήσουν τη διαχείριση ημερομηνίας και ώρας στο React. Μια τέτοια βιβλιοθήκη είναι η Day.js.

Το Day.js είναι μια ελαφριά βιβλιοθήκη για ανάλυση, επικύρωση, χειρισμό και μορφοποίηση ημερομηνιών και ωρών σε JavaScript.

Εγκατάσταση Day.js

ο Day.js η βιβλιοθήκη είναι μια σύγχρονη εναλλακτική Moment.js, η οποία είναι μια άλλη βιβλιοθήκη που χρησιμοποιείται για το χειρισμό ημερομηνιών και ωρών. Το Day.js προσφέρει ένα παρόμοιο API με μικρότερο αποτύπωμα και ταχύτερη απόδοση.

Για να χρησιμοποιήσετε το Day.js στην εφαρμογή React, πρέπει πρώτα να το εγκαταστήσετε. Μπορείτε να το κάνετε αυτό εκτελώντας την ακόλουθη εντολή στο τερματικό σας:

instagram viewer 
npm εγκατάσταση dayjs

Ανάλυση και μορφοποίηση ημερομηνιών και ωρών

Το Day.js παρέχει ένα απλό API για ανάλυση και μορφοποίηση ημερομηνιών. Μπορείτε να λάβετε την ημερομηνία και την ώρα χρησιμοποιώντας το dayjs() μέθοδο, αλλά πρώτα, πρέπει να την εισαγάγετε από τη βιβλιοθήκη Day.js.

Για παράδειγμα:

εισαγωγή Αντιδρώ από'αντιδρώ';
εισαγωγή dayjs από'dayjs';
λειτουργίαApp() {


συνθ ημερομηνία = dayjs();
κονσόλα.log (ημερομηνία); 


ΕΠΙΣΤΡΟΦΗ (




Ημερομηνία και Διαχείριση Χρόνου</p>
 </div>
 )
}


εξαγωγήΠροκαθορισμένο App

ο dayjs() Η μέθοδος δημιουργεί ένα νέο αντικείμενο Day.js που αντιπροσωπεύει μια συγκεκριμένη ημερομηνία και ώρα. Στο παραπάνω παράδειγμα, το dayjs() Η μέθοδος δημιουργεί ένα αντικείμενο Day.js που αντιπροσωπεύει την τρέχουσα ημερομηνία και ώρα.

Στην κονσόλα σας, το αντικείμενο Day.js θα μοιάζει με αυτό:

ο dayjs() Η μέθοδος δέχεται ένα προαιρετικό όρισμα ημερομηνίας που μπορεί να είναι μια συμβολοσειρά, ένας αριθμός (χρονοσήμανση Unix), ένα αντικείμενο JavaScript Date, ή άλλο αντικείμενο Day.js. Η μέθοδος θα δημιουργήσει ένα αντικείμενο Day.js που αντιπροσωπεύει το καθορισμένο όρισμα ημερομηνίας.

Για παράδειγμα:

εισαγωγή Αντιδρώ από'αντιδρώ';
εισαγωγή dayjs από'dayjs';
λειτουργίαApp() {


συνθ ημερομηνία = dayjs('2023-05-01');
κονσόλα.log (ημερομηνία); // Αντικείμενο Day.js που αντιπροσωπεύει την καθορισμένη ημερομηνία


συνθ unixDate = dayjs(1651382400000);
κονσόλα.log (unixDate); // Αντικείμενο Day.js που αντιπροσωπεύει την καθορισμένη ημερομηνία


ΕΠΙΣΤΡΟΦΗ (




Ημερομηνία και Διαχείριση Χρόνου</p>
 </div>
 )
}


εξαγωγήΠροκαθορισμένο App

Η έξοδος του αντικειμένου Day.js αυτού του μπλοκ κώδικα θα είναι παρόμοια με το προηγούμενο μπλοκ κώδικα, αλλά θα έχει διαφορετικές τιμές ιδιοτήτων.

Για να εμφανίσετε τις ημερομηνίες που δημιουργούνται ως αντικείμενα Day.js, πρέπει να χρησιμοποιήσετε το μορφή() μέθοδος. ο μορφή() Η μέθοδος της βιβλιοθήκης Day.js σάς επιτρέπει να μορφοποιήσετε ένα αντικείμενο Day.js ως συμβολοσειρά σύμφωνα με μια συγκεκριμένη συμβολοσειρά μορφής.

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

Για παράδειγμα:

εισαγωγή Αντιδρώ από'αντιδρώ';
εισαγωγή dayjs από'dayjs';
λειτουργίαApp() {


συνθ ημερομηνία = dayjs('2023-05-01').μορφή('ηηη, ΜΜΜΜ Δ, ΕΕΕΕ'); // Δευτέρα, 1 Μαΐου 2023
συνθ time = dayjs().format('ΩΩ: μμ: σσ'); //09:50:23
συνθ unixDate = dayjs(1651382400000).μορφή('ΜΜ/ΗΗ/ΕΕ'); // 05/01/22


ΕΠΙΣΤΡΟΦΗ (




{ημερομηνία}</p>


{unixDate}</p>


{time}</p>
 </div>
 )
}


εξαγωγήΠροκαθορισμένο App

ο ημερομηνία Η μεταβλητή θα εμφανίσει την ημερομηνία σε αυτήν τη μορφή "Τετάρτη, 26 Απριλίου 2023". Η συμβολοσειρά μορφής είναι «ηηη, ΜΜΜΜ Δ, ΕΕΕΕ» που δδδ είναι η μέρα της εβδομάδας, ΜΜΜΜ είναι ο μήνας στα λόγια, ρε είναι η ημέρα του μήνα με ένα ή δύο ψηφία και ΕΕΕΕ είναι το έτος με τέσσερα ψηφία.

ο unixDate η μεταβλητή μορφοποιείται ως συμβολοσειρά χρησιμοποιώντας τη συμβολοσειρά μορφοποίησης 'ΜΜ/ΗΗ/ΕΕΕΕ,' που αντιπροσωπεύει τον μήνα με δύο ψηφία, την ημέρα του μήνα με δύο ψηφία και το έτος με τέσσερα ψηφία.

ο χρόνος μεταβλητή εμφανίζει την τρέχουσα ώρα στην καθορισμένη μορφή. Η συμβολοσειρά μορφής είναι "ΩΩ: χλστ: σσ" όπου το HH αντιπροσωπεύει τις ώρες, το mm αντιπροσωπεύει τα πρακτικά, και το σσ αντιπροσωπεύει τα δευτερόλεπτα.

Χειρισμός ημερομηνιών και ωρών

Το Day.js παρέχει πολλές μεθόδους που διευκολύνουν τον χειρισμό ημερομηνιών και ωρών. Μπορείτε να ανατρέξετε στο Day.js επίσημη τεκμηρίωση για να λάβετε την πλήρη λίστα με τις διαθέσιμες μεθόδους χειρισμού ημερομηνιών και ωρών.

Για παράδειγμα:

εισαγωγή Αντιδρώ από'αντιδρώ';
εισαγωγή dayjs από'dayjs';
λειτουργίαApp() {


συνθ ημερομηνία = dayjs().add(7,'ημέρες').μορφή('ηηη, ΜΜΜΜ Δ, ΕΕΕΕ'); // Τετάρτη, 16 Ιουνίου 2023 
συνθ χρόνος = dayjs().αφαίρεση(2, 'ώρες').μορφή('ΩΩ: μμ: σσ'); // 07:53:00


ΕΠΙΣΤΡΟΦΗ (




{ημερομηνία}</p>


{time}</p>
 </div>
 )
}


εξαγωγήΠροκαθορισμένο App

Το μπλοκ κώδικα παραπάνω χρησιμοποιεί το Προσθήκη() μέθοδος προσθήκης 7 ημερών στην τρέχουσα ημερομηνία. ο Προσθήκη() Η μέθοδος σάς επιτρέπει να προσθέσετε ένα καθορισμένο χρονικό διάστημα σε ένα αντικείμενο Day.js. Η μέθοδος απαιτεί δύο ορίσματα, το χρονικό διάστημα για την πρόσθεση σε αριθμούς και τη μονάδα χρόνου για πρόσθεση.

Με την αφαιρώ() μέθοδο, μπορείτε να αφαιρέσετε ένα καθορισμένο χρονικό διάστημα από το Day.js αντικείμενο. ο χρόνος μεταβλητή αφαιρεί 2 ώρες από την τρέχουσα ώρα χρησιμοποιώντας το αφαιρώ() μέθοδος.

Εμφάνιση σχετικής ώρας

Το Day.js παρέχει διάφορες μεθόδους όπως από τώρα(), toNow (), προς την(), και από() για εμφάνιση σχετικού χρόνου, όπως "πριν από 2 ώρες" ή "σε 3 ημέρες". Για να χρησιμοποιήσετε αυτές τις μεθόδους, εισαγάγετε το σχετικός χρόνος πρόσθετο από dayjs/plugin/relativeTime στην εφαρμογή React σας.

Για παράδειγμα:

εισαγωγή Αντιδρώ από'αντιδρώ';
εισαγωγή dayjs από'dayjs';
εισαγωγή σχετικός χρόνος από'dayjs/plugin/relativeTime';
λειτουργίαApp() {


 dayjs.extend (relativeTime);

συνθ ημερομηνία = dayjs().add(7, 'ημέρες')
συνθ relativeDate = date.fromNow(); // σε 7 ημέρες


συνθ date2 = dayjs().αφαίρεση(2, 'ώρες');
συνθ relativeDate2 = date2.toNow(); // σε 2 ώρες


συνθ lastYear = dayjs().αφαίρεση(1, 'έτος');
συνθ diff = date.from (lastYear); // σε ένα χρόνο
συνθ diff2 = date.to (lastYear) // πριν ένα χρόνο


ΕΠΙΣΤΡΟΦΗ (




{ σχετικήΗμερομηνία }</p>


{ relativeDate2 }</p>


{διαφορά }</p>


{διαφορά2 }</p>
 </div>
 )
}


εξαγωγήΠροκαθορισμένο App

ο από τώρα() Η συνάρτηση εμφανίζει μια σχετική συμβολοσειρά χρόνου που αντιπροσωπεύει τη διαφορά μεταξύ της τρέχουσας ώρας και μιας καθορισμένης ημερομηνίας. Σε αυτό το παράδειγμα, το από τώρα() εμφανίζει τη διαφορά μεταξύ ημερομηνία και την τρέχουσα ώρα.

ο toNow () η λειτουργία είναι παρόμοια με το από τώρα() λειτουργία στο ότι εμφανίζει μια συμβολοσειρά που αντιπροσωπεύει τη διαφορά μεταξύ μιας καθορισμένης ημερομηνίας και της τρέχουσας ώρας. Όταν καλείτε το toNow () συνάρτηση, επιστρέφει μια σχετική χρονική συμβολοσειρά στην τρέχουσα ώρα.

Τέλος, χρησιμοποιώντας το από() και προς την() λειτουργίες, μπορείτε να εμφανίσετε μια σχετική χρονική συμβολοσειρά που αντιπροσωπεύει τη διαφορά μεταξύ δύο καθορισμένων ημερομηνιών. Σε αυτό το παράδειγμα, βλέπετε τη διαφορά μεταξύ πέρυσι και ημερομηνία χρησιμοποιώντας την από() και προς την() λειτουργίες.

Σημείωση, μπορείτε επίσης να μεταβιβάσετε ένα προαιρετικό όρισμα boolean στο από τώρα(), toNow (), από(), και προς την() μεθόδους για να καθορίσετε εάν θα συμπεριληφθεί ή θα εξαιρεθεί το επίθημα (π.χ. "πριν" ή "σε").

Για παράδειγμα:

συνθ ημερομηνία = dayjs().add(7, 'ημέρες')
συνθ relativeDate = date.fromNow(αληθής); // 7 ημέρες
συνθ date2 = dayjs().αφαίρεση(2, 'ώρες');
συνθ relativeDate2 = date2.toNow(αληθής); // 2 ώρες
συνθ lastYear = dayjs().αφαίρεση(1, 'έτος');
συνθ diff = date.from (lastYear, αληθής) // ένα έτος
συνθ diff2 = date.to (lastYear, αληθής) // ένα έτος

Πέρασμα ψευδής στο όρισμα θα εμφανίσει τις ημερομηνίες με το επίθημα.

Αποτελεσματική διαχείριση ημερομηνίας και ώρας

Η διαχείριση ημερομηνίας και ώρας είναι μια κρίσιμη πτυχή οποιασδήποτε εφαρμογής και το Day.js παρέχει μια εύχρηστη και ευέλικτη βιβλιοθήκη για το χειρισμό αυτών των λειτουργιών σε μια εφαρμογή React. Με την ενσωμάτωση του Day.js στο έργο σας, μπορείτε εύκολα να μορφοποιήσετε ημερομηνίες και ώρες, να αναλύσετε συμβολοσειρές και να χειριστείτε τις διάρκειες.

Επιπλέον, το Day.js προσφέρει μια σειρά προσθηκών για να επεκτείνει τη λειτουργικότητά του και να το κάνει ακόμα πιο ισχυρό. Είτε δημιουργείτε ένα απλό ημερολόγιο είτε ένα σύνθετο σύστημα προγραμματισμού, το Day.js είναι μια εξαιρετική επιλογή για τη διαχείριση ημερομηνίας και ώρας στην εφαρμογή React σας.