Το Moment.js είναι μια φανταστική βιβλιοθήκη για αποτελεσματικό χειρισμό ημερομηνίας και ώρας στις εφαρμογές React.

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

Το Moment.js είναι μια ελαφριά βιβλιοθήκη με έναν απλό τρόπο χειρισμού και μορφοποίησης ημερομηνιών και ωρών σε JavaScript.

Εγκατάσταση της βιβλιοθήκης Moment.js

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

npm στιγμή εγκατάστασης

Μόλις ολοκληρωθεί η εγκατάσταση, μπορείτε να χρησιμοποιήσετε το Moment.js στο στοιχείο React.

Χρήση του Moment.js για εμφάνιση ημερομηνίας και ώρας

instagram viewer

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

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


συνθ ημερομηνία = moment().format("MMMM ΗΗ ΕΕΕΕ");
συνθ time = moment().format("HH mm ss");


ΕΠΙΣΤΡΟΦΗ (




 Σήμεραη ημερομηνία του είναι { ημερομηνία } 


 Η ώρα είναι { time } </p>
 </div>
 )
}


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

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

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

Μερικοί από αυτούς τους ειδικούς χαρακτήρες είναι:

  • ΕΕΕΕ: Έτος με τέσσερα ψηφία
  • YY: Έτος με δύο ψηφία
  • ΜΜ: Μήνας με δύο ψηφία
  • Μ: Μήνας με ένα ή δύο ψηφία
  • ΜΜΜΜ: Μήνας με λόγια
  • DD: Ημέρα του μήνα με δύο ψηφία
  • ρε: Ημέρα του μήνα με ένα ή δύο ψηφία
  • Κάνω: Ημέρα του μήνα με το τακτικό
  • HH: Ώρα με δύο ψηφία
  • H: Ώρα με ένα ή δύο ψηφία
  • mm: Λεπτό με δύο ψηφία
  • Μ: Λεπτό με ένα ή δύο ψηφία
  • σσ: Δεύτερο με δύο ψηφία
  • μικρό: Δεύτερο με ένα ή δύο ψηφία

Οταν ο App το στοιχείο στο προηγούμενο μπλοκ κώδικα αποδίδεται, η τρέχουσα ημερομηνία και ώρα εμφανίζονται στην καθορισμένη μορφή στην οθόνη.

ο στιγμή() Η μέθοδος μπορεί να λάβει ένα όρισμα ημερομηνίας ή ώρας συμβολοσειράς. Οταν ο στιγμή() Η μέθοδος έχει ένα όρισμα συμβολοσειράς ημερομηνίας ή ώρας, δημιουργεί ένα αντικείμενο στιγμής που αντιπροσωπεύει αυτήν την ημερομηνία ή ώρα. Η συμβολοσειρά μπορεί να είναι σε διάφορες μορφές, όπως ISO 8601, RFC 2822 ή Unix timestamp.

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

συνθ ημερομηνία = στιγμή('1998-06-23').μορφή("MMMM ΗΗ ΕΕΕΕ");

Χρήση του Moment.js για χειρισμό ημερομηνίας και ώρας

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

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

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


συνθ αύριο = στιγμή().add(1, 'ημέρα').μορφή("Κάντε ΜΜΜΜ, ΕΕΕΕ");
συνθ χρόνος = στιγμή().αφαίρεση(1, 'ώρα').μορφή("ΩΩ: μμ: σσ");
συνθ lastYear = moment().set('έτος', 2022).σειρά('μήνας', 1).μορφή("Κάντε ΜΜΜΜ, ΕΕΕΕ");
συνθ ώρα = στιγμή().get('ώρα');


ΕΠΙΣΤΡΟΦΗ (


"Εφαρμογή">
Αύριοη ημερομηνία του είναι { αύριο }


Αυτή ήταν η ώρα: { time }, πριν από μία ώρα</p>


{ προηγούμενο έτος }</p>


{ ώρα }</p>
 </div>
 )
}


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

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

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

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

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

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

Χρήση του Moment.js για ανάλυση ημερομηνίας και ώρας

Ένα άλλο χρήσιμο χαρακτηριστικό του Moment.js είναι η ικανότητά του να αναλύει ημερομηνίες και ώρες από συμβολοσειρές. Αυτό μπορεί να είναι χρήσιμο όταν εργάζεστε με δεδομένα από εξωτερικές πηγές.

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

Εδώ είναι ένα παράδειγμα για το πώς μπορείτε να χρησιμοποιήσετε το στιγμή() μέθοδος ανάλυσης ημερομηνιών και ωρών:

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


συνθ ημερομηνία = στιγμή('2920130000', "Do-MMMM-YYYY").μέχρι σήμερα();
κονσόλα.log( ημερομηνία );


ΕΠΙΣΤΡΟΦΗ (


</div>
 )
}
εξαγωγήΠροκαθορισμένο App

Στο μπλοκ κωδικών παραπάνω, στιγμή() Η μέθοδος θα αναλύσει αυτήν τη συμβολοσειρά "2920130000" χρησιμοποιώντας τη συμβολοσειρά μορφής "Do-MMMM-YYYY". ο μέχρι σήμερα() μέθοδος μετατρέπει το αντικείμενο στιγμής σε ένα εγγενές αντικείμενο JavaScript Date.

ο μέχρι σήμερα() Η μέθοδος δεν δέχεται ορίσματα και επιστρέφει ένα αντικείμενο JavaScript Date που αντιπροσωπεύει την ίδια ημερομηνία και ώρα με το αντικείμενο στιγμής.

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

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

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

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


συνθ χθες = στιγμή().αφαίρεση(7, 'ημέρα');
συνθ time1 = χθες.fromNow(); // πριν από 7 ημέρες
συνθ time2 = χθες.toNow(); // σε 7 ημέρες


ΕΠΙΣΤΡΟΦΗ (




{ time1 }</p>


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


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

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

Περισσότερα στο Moment.js

Το Moment.js είναι μια ισχυρή βιβλιοθήκη που παρέχει έναν απλό τρόπο χειρισμού και μορφοποίησης ημερομηνιών και ωρών σε JavaScript. Έχετε μάθει πώς να χειρίζεστε, να εμφανίζετε και να αναλύετε ημερομηνίες και ώρες στο React χρησιμοποιώντας το Moment.js.

Το Moment.js προσφέρει πολλές άλλες μεθόδους, όπως local, startOf, endOf και ούτω καθεξής. Ωστόσο, με τις παρεχόμενες πληροφορίες, είστε περισσότερο από έτοιμοι να αρχίσετε να χρησιμοποιείτε το Moment.js στην εφαρμογή React σας.