date-fns Playground
Δοκιμάστε και πειραματιστείτε με συναρτήσεις βιβλιοθήκης date-fns σε ένα ζωντανό JavaScript playground με άμεση έξοδο
Είσοδος
Έξοδος
Readme
Τι είναι το date-fns;
Το date-fns είναι μια σύγχρονη βιβλιοθήκη χρησιμότητας ημερομηνίας JavaScript που παρέχει ολοκληρωμένα, συνεπή και αξιόπιστα εργαλεία για εργασία με ημερομηνίες στη JavaScript. Σε αντίθεση με το εγγενές αντικείμενο JavaScript Date που έχει πολλές παραδοξότητες και ασυνέπειες, το date-fns προσφέρει μια αρθρωτή, λειτουργική προσέγγιση στη χειραγώγηση ημερομηνιών. Είναι tree-shakeable, που σημαίνει ότι περιλαμβάνετε μόνο τις συναρτήσεις που χρησιμοποιείτε πραγματικά, διατηρώντας το μέγεθος της δέσμης σας ελάχιστο. Η βιβλιοθήκη υποστηρίζει περισσότερες από 200 συναρτήσεις που καλύπτουν τα πάντα από τη μορφοποίηση και ανάλυση έως τη σύγκριση, χειραγώγηση και τοπικοποίηση ημερομηνιών.
Γιατί να χρησιμοποιήσετε ένα date-fns playground;
Η εργασία με ημερομηνίες στη JavaScript μπορεί να είναι δύσκολη—οι ζώνες ώρας, τα μοτίβα μορφοποίησης και η αριθμητική ημερομηνιών συχνά οδηγούν σε απροσδόκητα αποτελέσματα. Ένα περιβάλλον playground σας επιτρέπει να πειραματιστείτε με συναρτήσεις date-fns σε πραγματικό χρόνο, να δείτε άμεσα αποτελέσματα και να μάθετε το API χωρίς να ρυθμίσετε ένα πλήρες έργο. Είναι ιδανικό για δοκιμή συμβολοσειρών μορφοποίησης, εντοπισμό σφαλμάτων υπολογισμών ημερομηνιών ή γρήγορη δημιουργία πρωτοτύπων λογικής ημερομηνιών πριν την ενσωμάτωσή της στην εφαρμογή σας.
Περιγραφή εργαλείου
Το date-fns Playground είναι ένα διαδραστικό περιβάλλον κωδικοποίησης που σας επιτρέπει να γράψετε και να εκτελέσετε κώδικα JavaScript με την πλήρη βιβλιοθήκη date-fns προ-φορτωμένη. Ολόκληρη η βιβλιοθήκη date-fns είναι διαθέσιμη μέσω του αντικειμένου dateFns, δίνοντάς σας πρόσβαση σε όλες τις 200+ συναρτήσεις. Ο κώδικας εκτελείται αυτόματα καθώς πληκτρολογείτε (με debouncing), και όλα τα αποτελέσματα console.log, console.warn και console.error εμφανίζονται στο ενσωματωμένο τερματικό κάτω από τον επεξεργαστή. Αυτό το καθιστά ιδανικό για εκμάθηση date-fns, δοκιμή λειτουργιών ημερομηνιών και πειραματισμό με διαφορετικές επιλογές μορφοποίησης.
Παραδείγματα
Μορφοποίηση της τρέχουσας ημερομηνίας:
const now = new Date();
console.log(dateFns.format(now, "MMMM do, yyyy"));
// Αποτέλεσμα: December 30th, 2025Υπολογισμός ημερών μεταξύ δύο ημερομηνιών:
const start = new Date(2025, 0, 1);
const end = new Date(2025, 11, 31);
console.log(dateFns.differenceInDays(end, start) + " ημέρες");
// Αποτέλεσμα: 364 ημέρεςΠροσθήκη χρόνου σε μια ημερομηνία:
const today = new Date();
const nextWeek = dateFns.addWeeks(today, 1);
const nextMonth = dateFns.addMonths(today, 1);
console.log("Επόμενη εβδομάδα:", dateFns.format(nextWeek, "yyyy-MM-dd"));
console.log("Επόμενος μήνας:", dateFns.format(nextMonth, "yyyy-MM-dd"));Έλεγχος εάν μια ημερομηνία είναι στο παρελθόν ή στο μέλλον:
const date = new Date(2024, 5, 15);
console.log("Είναι παρελθόν;", dateFns.isPast(date));
console.log("Είναι μέλλον;", dateFns.isFuture(date));Ανάλυση μιας συμβολοσειράς ημερομηνίας:
const parsed = dateFns.parse("25/12/2025", "dd/MM/yyyy", new Date());
console.log(dateFns.format(parsed, "EEEE, MMMM do, yyyy"));
// Αποτέλεσμα: Thursday, December 25th, 2025Χαρακτηριστικά
- Πλήρης Βιβλιοθήκη date-fns: Πρόσβαση σε όλες τις 200+ συναρτήσεις date-fns μέσω του αντικειμένου
dateFns - Εκτέλεση Κώδικα σε Πραγματικό Χρόνο: Ο κώδικας εκτελείται αυτόματα καθώς πληκτρολογείτε με έξυπνο debouncing
- Ενσωματωμένο Τερματικό: Προβολή αποτελεσμάτων console αμέσως χωρίς εργαλεία ανάπτυξης περιηγητή
- Επισήμανση Σύνταξης: Επισήμανση σύνταξης JavaScript για καλύτερη αναγνωσιμότητα κώδικα
- Χειρισμός Σφαλμάτων: Σφάλματα χρόνου εκτέλεσης εμφανίζονται ξεκάθαρα στα αποτελέσματα του τερματικού
Περιπτώσεις χρήσης
- Εκμάθηση date-fns: Πειραματιστείτε με διαφορετικές συναρτήσεις και δείτε αποτελέσματα αμέσως χωρίς ρύθμιση έργου
- Δοκιμή Μορφοποίησης Ημερομηνίας: Δοκιμάστε διαφορετικές συμβολοσειρές μορφοποίησης για να βρείτε το ακριβές μοτίβο αποτελέσματος που χρειάζεστε
- Δημιουργία Πρωτοτύπων Υπολογισμού Ημερομηνίας: Δοκιμάστε σύνθετη αριθμητική ημερομηνιών όπως προσθήκη εργάσιμων ημερών, εύρεση διαστημάτων ή σύγκριση ημερομηνιών
- Εντοπισμός Σφαλμάτων Λογικής Ημερομηνίας: Απομόνωση και δοκιμή αποσπασμάτων κώδικα που σχετίζονται με ημερομηνίες από τα έργα σας
- Γρήγορες Μετατροπές Ημερομηνιών: Μετατροπή μεταξύ μορφών ημερομηνιών ή υπολογισμός διαφορών ώρας εν κινήσει
Κοινές Συναρτήσεις date-fns
| Συνάρτηση | Περιγραφή | Παράδειγμα |
|---|---|---|
format |
Μορφοποίηση ημερομηνίας σε συμβολοσειρά | dateFns.format(date, "yyyy-MM-dd") |
parse |
Ανάλυση συμβολοσειράς σε ημερομηνία | dateFns.parse("2025-01-01", "yyyy-MM-dd", new Date()) |
addDays |
Προσθήκη ημερών σε ημερομηνία | dateFns.addDays(date, 7) |
subMonths |
Αφαίρεση μηνών από ημερομηνία | dateFns.subMonths(date, 3) |
differenceInDays |
Λήψη ημερών μεταξύ ημερομηνιών | dateFns.differenceInDays(dateA, dateB) |
isAfter |
Έλεγχος εάν η ημερομηνία είναι μετά από άλλη | dateFns.isAfter(dateA, dateB) |
isBefore |
Έλεγχος εάν η ημερομηνία είναι πριν από άλλη | dateFns.isBefore(dateA, dateB) |
startOfMonth |
Λήψη πρώτης ημέρας του μήνα | dateFns.startOfMonth(date) |
endOfYear |
Λήψη τελευταίας στιγμής του έτους | dateFns.endOfYear(date) |
formatDistance |
Διαφορά ώρας ανθρώπινης ανάγνωσης | dateFns.formatDistance(dateA, dateB) |
Αναφορά Tokens Μορφοποίησης
| Token | Περιγραφή | Παράδειγμα |
|---|---|---|
yyyy |
Έτος 4 ψηφίων | 2025 |
MM |
Μήνας 2 ψηφίων | 01-12 |
MMMM |
Πλήρες όνομα μήνα | January |
dd |
Ημέρα 2 ψηφίων | 01-31 |
do |
Ημέρα με τακτικό | 1st, 2nd, 3rd |
EEEE |
Πλήρες όνομα ημέρας εβδομάδας | Monday |
EEE |
Σύντομη ημέρα εβδομάδας | Mon |
HH |
Ώρα 24 ωρών | 00-23 |
hh |
Ώρα 12 ωρών | 01-12 |
mm |
Λεπτά | 00-59 |
ss |
Δευτερόλεπτα | 00-59 |
a |
AM/PM | AM, PM |