Δημιουργία ελάττωσης εισόδου ημερομηνίας με ελάχιστο μέγεθος με επιλογή Flatpickr

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

Τα πεδία επιλογής λειτουργούν καλά, αλλά είναι λίγο παχουλό. Αντ 'αυτού, μπορείτε να τζαζ μέχρι τη φόρμα σας με το Flatpickr plugin. Είναι ένα ελεύθερο, ανοικτού κώδικα πρόγραμμα περιήγησης ημερολογίου JavaScript με μηδενικές εξαρτήσεις.

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

Ένα ωραίο πράγμα για αυτό το plugin είναι το ποικιλία προσαρμοσμένων επιλογών. Μπορείτε να αλλάξετε τον τρόπο με τον οποίο εμφανίζονται οι ημερομηνίες στο πεδίο κειμένου και από πού ξεκινά το ημερολόγιο (προεπιλεγμένες ρυθμίσεις “σήμερα”).

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

Ρίξτε μια ματιά στο Σελίδα παραδειγμάτων για να δείτε Flatpickr σε δράση.

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

• Δεν επιτρέπονται ορισμένες ημερομηνίες / σειρές
• Επιτρέπεται μόνο ορισμένες ημερομηνίες / σειρές
• Επιτρέπεται η επιλογή πολλαπλών ημερομηνιών
• “Λειτουργία εύρους” για να επιλέξετε ημερομηνία έναρξης και λήξης
• Απλά μια επιλογή ημερομηνίας, ή μόλις ώρα, ή και οι δύο ημερομηνία και ώρα μαζί

Οι επιλογές είναι πρακτικά ατελείωτες και όλοι εργάζονται μέσα από αυτό το ένα vanilla plugin JavaScript.

Οι χρήστες κινητής τηλεφωνίας προτιμούν συχνά τον τοπικό επιλογέα ημερομηνίας, αλλά μπορείτε αντικαταστήστε αυτό με μια ρύθμιση για κινητά στο JavaScript. Με αυτόν τον τρόπο θα έχετε την ίδια διεπαφή που λειτουργεί σε όλες τις συσκευές.

Και, μπορείτε ακόμη και προσθέστε υποστήριξη IE9 με ένα polyfill γεγονός που καθιστά αυτό το ένα από τα πιο καλά υποστηριζόμενα plug-in επιλογής ημερομηνίας εκεί έξω.

Η εγκατάσταση είναι απλή με εντολές για npm, Bower, και Νήματα. Ή, μπορείτε να κάνετε λήψη των αρχείων προέλευσης απευθείας από το GitHub αν προτιμάτε αυτή τη διαδρομή.

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