Moment.js: Πλήρης εξήγηση και πρακτικά παραδείγματα της βιβλιοθήκης ημερομηνιών

Informatec Digital » Ιδιώματα » Moment.js: Πλήρης εξήγηση και πρακτικά παραδείγματα της βιβλιοθήκης ημερομηνιών

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

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

Τι είναι το Moment.js και γιατί έχει γίνει τόσο δημοφιλές;

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

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

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

Βασικά χαρακτηριστικά και οφέλη του Moment.js

• Απλό και εύχρηστο APIΈνα από τα μεγαλύτερα πλεονεκτήματα του Moment.js είναι η σαφής σύνταξή του. Μπορείτε να εκτελέσετε απλές λειτουργίες, όπως η λήψη της τρέχουσας ημερομηνίας ή η μετατροπή μιας συμβολοσειράς σε συγκεκριμένη μορφή, ή σύνθετους υπολογισμούς και επικυρώσεις σε λίγες μόνο γραμμές.
• Ευέλικτη ανάλυση και μορφοποίησηΗ ανάλυση συμβολοσειρών ημερομηνίας σχεδόν οποιασδήποτε μορφής και η μετατροπή τους στην επιθυμητή έξοδο δεν ήταν ποτέ ευκολότερη. Το Moment.js κάνει γρήγορη και εύκολη τη μορφοποίηση ημερομηνιών σε προσαρμοσμένες παρουσιάσεις..
• Χειραγώγηση ημερομηνίαςΗ προσθήκη ή η αφαίρεση ημερών, μηνών, ετών, εβδομάδων ή οποιασδήποτε άλλης μονάδας χρόνου είναι τόσο απλή όσο η χρήση των μεθόδων Προσθήκη() y αφαιρώ()Αυτό είναι πολύ χρήσιμο όταν χρειάζεται να εργαστείτε με σχετικές ημερομηνίες, ημερομηνίες λήξης ή χρονικά πλαίσια που ποικίλλουν δυναμικά.
• Ισχυρή επικύρωσηΑν χρειάζεται να ελέγξετε αν μια ημερομηνία είναι έγκυρη ή υπάρχει (για παράδειγμα, 30 Φεβρουαρίου), το Moment.js σας διευκολύνει. Η μέθοδος είναι έγκυρο() Είναι σε θέση να ανιχνεύσει ανεπαίσθητα σφάλματα στη μορφή ή τη λογική των ημερομηνιών.
• Υποστήριξη για ζώνες ώρας και εντοπισμό τοποθεσίας: Ευχαριστώ για το πρόσθετο σας χρονική ζώνη στιγμήςΕίναι πολύ εύκολο να μετατρέψετε ημερομηνίες μεταξύ διαφορετικών ζωνών ώρας. Μπορείτε επίσης να εμφανίσετε ημερομηνίες προσαρμοσμένες στη γλώσσα του χρήστη και στις τοπικές συμβάσεις, κάτι που είναι βασικό στις παγκόσμιες εφαρμογές.
• Οικοσύστημα πρόσθετων (plugins)Εκτός από την κύρια βιβλιοθήκη, υπάρχει ένα οικοσύστημα πρόσθετων (plugins) για την επέκταση της λειτουργικότητάς του (ημερολόγιο, συμβατότητα με άλλα frameworks, εξωτικές μορφές...).

Πώς να ξεκινήσετε με το Moment.js στο έργο σας

Η εγκατάσταση είναι πολύ απλή . Μπορείτε να συμπεριλάβετε το Moment.js στον κώδικα HTML σας με μία μόνο γραμμή:

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>

Εάν εργάζεστε με Node.js ή με ένα σύγχρονο περιβάλλον ανάπτυξης, είναι σύνηθες να το εγκαταστήσετε χρησιμοποιώντας npm ή yarn:

npm install moment

Μόλις γίνει αυτό, μπορείτε να εισαγάγετε το Moment.js σύμφωνα με τη σύνταξη που χρησιμοποιείτε:

// Versión CommonJS
var moment = require('moment');
moment().format();

// ES6
import moment from 'moment';
moment().format();

Δημιουργία ημερομηνιών: διαφορετικοί τρόποι και πρακτικά παραδείγματα

Δημιουργήστε εύκολα ημερομηνίες

Για να λάβετε την τρέχουσα ημερομηνία και ώρα, απλώς χρησιμοποιήστε moment():

console.log(moment()); // Devuelve la fecha actual en formato ISO8601

Μπορείτε να κατασκευάσετε μια συγκεκριμένη ημερομηνία διαβιβάζοντας ορίσματα:

moment("2022-10-14"); // Crea el 14 de octubre de 2022

Μπορείτε επίσης να ξεκινήσετε από μια δεδομένη συμβολοσειρά και μορφή, ακόμα και σε αυστηρή λειτουργία:

moment("25/12/1995", "DD/MM/YYYY", true); // Analiza y comprueba el formato

Έχετε ένα εγγενές αντικείμενο Ημερομηνίας;

const fechaJS = new Date();
const miFecha = moment(fechaJS);

Μορφοποίηση και εμφάνιση ημερομηνιών

Το Moment.js σάς επιτρέπει να εμφανίζετε ημερομηνίες σε οποιαδήποτε μορφή μπορείτε να φανταστείτε . Για παράδειγμα, για να εμφανίσετε την τρέχουσα ημερομηνία ως ημέρα/μήνας/έτος:

moment().format('DD/MM/YYYY');

Αν θέλετε μια πιο ανθρώπινη αλυσίδα, μπορείτε να χρησιμοποιήσετε:

moment().format('MMMM Do YYYY, h:mm:ss a'); // Ejemplo: "marzo 8º 2024, 3:21:10 pm"

Μερικά χρήσιμα διακριτικά για μορφοποίηση :

• YYYY: 4ψήφιο έτος
• MM: μήνας
• DD: ημέρα του μήνα
• hh o HH: ώρα (μορφή 12 ωρών ή 24 ωρών)
• mm: λεπτά
• ss: δευτερόλεπτα
• a: π.μ./μ.μ.

Για παράδειγμα, για να εμφανίσετε μόνο την ώρα:

moment().format('HH:mm:ss');

Προηγμένη μορφοποίηση με διακριτικά και περιφερειακή υποστήριξη

Το Moment.js υποστηρίζει πολλαπλές μεταφρασμένες μορφές και μεταφράσεις . Είναι δυνατή η εναλλαγή γλωσσών εν κινήσει για την εμφάνιση των ονομάτων μήνα και ημέρας σε άλλη γλώσσα.

moment.locale('es'); // Cambia a español
document.write(moment().format('LLLL'));
// Ejemplo: martes, 8 de marzo de 2024 15:21

Χειρισμός ημερομηνίας: πρόσθεση, αφαίρεση και σύγκριση

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

• Προσθήκη ημερών, μηνών ή ετών:

  moment().add(3, 'days').format('DD/MM/YYYY');

• Αφαίρεση μονάδων:

  moment().subtract(2, 'months').format('DD/MM/YYYY');

• Έναρξη και λήξη περιόδων:

  moment().startOf('month').format('DD/MM/YYYY'); // Primer día del mes
  moment().endOf('month').format('DD/MM/YYYY');   // Último día del mes

Επικύρωση ημερομηνιών και εντοπισμός σφαλμάτων

Πριν από την επεξεργασία ημερομηνιών, είναι σημαντικό να επαληθεύσετε ότι είναι σωστές:

moment('2024-02-30', 'YYYY-MM-DD').isValid(); // false, el 30 de febrero no existe

Αυτό αποτρέπει μη αναμενόμενα σφάλματα σε εφαρμογές που λαμβάνουν ημερομηνίες από τον χρήστη.

Σύγκριση ημερομηνιών: ελέγξτε αν μια ημερομηνία είναι μεταξύ άλλων

Το Moment.js περιλαμβάνει αρκετές μεθόδους για τη σύγκριση ημερομηνιών:

• είναιΠριν(): Ελέγχει αν μια ημερομηνία είναι πριν από μια άλλη.
• είναιΜετά()Ελέγχει αν μια ημερομηνία είναι μεταγενέστερη.
• είναιΜεταξύ(): Υποδεικνύει εάν μια ημερομηνία βρίσκεται μεταξύ δύο δεδομένων ημερομηνιών.

let hoy = moment();
let ayer = moment().subtract(1, 'days');
console.log(hoy.isAfter(ayer)); // true

Διαχείριση ζωνών ώρας και διεθνών ημερομηνιών

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

const moment = require('moment-timezone');
const fechaUTC = moment('2024-05-25');
const fechaNY = fechaUTC.tz('America/New_York').format('YYYY-MM-DD HH:mm:ss');
console.log(fechaNY);
// Ejemplo: "2024-05-24 20:00:00"

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

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

Βρείτε διαφορές μεταξύ ημερομηνιών

Μπορείτε να υπολογίσετε τον χρόνο που έχει παρέλθει μεταξύ δύο ημερομηνιών σε διαφορετικές μονάδες:

let inicio = moment('2024-01-01');
let fin = moment('2024-03-08');
let dias = fin.diff(inicio, 'days'); // Devuelve el número de días entre ambas

Σχετικές ημερομηνίες και ανθρώπινοι χρόνοι

Το Moment.js είναι ιδανικό για την εμφάνιση μηνυμάτων όπως "πριν από 3 ημέρες" ή "σε 5 ώρες":

moment().subtract(3, 'days').fromNow(); // "hace 3 días"
moment().add(2, 'hours').fromNow();    // "en 2 horas"

Ανθρώπινο ημερολόγιο

Η συνάρτηση calendar() εμφανίζει σχετικές ημερομηνίες όπως "χθες στις 17:00 μ.μ.", "αύριο στις 9:00 π.μ.", καθιστώντας την πολύ χρήσιμη για εφαρμογές ημερολογίου.

moment().subtract(1, 'days').calendar(); // "Ayer a las..."
moment().add(3, 'days').calendar();     // "Próximo martes a las..."

Υποστήριξη για άλματα έτους και ειδικές ημέρες

Θέλετε να μάθετε αν ένα έτος είναι δίσεκτο;

moment([2024]).isLeapYear(); // true

Η μέθοδος isLeapYear() σας δίνει την απάντηση απευθείας.

Προηγμένη προσαρμογή: μορφές, διακριτικά και αυστηρή ανάλυση

Το Moment.js σάς επιτρέπει να εργάζεστε με προσαρμοσμένες συμβολοσειρές και διακριτικά για να δημιουργείτε ή να διαβάζετε ημερομηνίες σε αμέτρητες μορφές . Επιπλέον, η αυστηρή λειτουργία απαιτεί ακριβείς αντιστοιχίσεις, αποτρέποντας ανεπαίσθητα σφάλματα και ανεπιθύμητες εκπλήξεις.

Για παράδειγμα, για να αναλύσετε μια ημερομηνία με τη μορφή "ημέρα/μήνας/έτος":

moment('12/03/2023', 'DD/MM/YYYY', true);

Λίστα κοινών διακριτικών και παραδειγμάτων

• Έτος: ΕΕΕΕ (2024), ΕΕ (24), ΕΕ (-500)
• Μήνας: ΜΜ (01 – 12), ΜΜΜ (Ιαν), ΜΜΜΜ (Ιανουάριος)
• Ημέρα: ΗΗ (01 – 31), Γ (1η – 31η)
• Χρόνος: ΩΩ (00 – 23), ωω (01 – 12), λλ (λεπτά), δδ (δευτερόλεπτα)
• Ζώνη ώρας: Ζ, ΖΖ

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