Επιλογέας ημέρας και ώρας

Επιλογέας ημέρας και ώρας

Το Datetime Selection picker είναι ένα απλό JavaScript component για την επιλογή ημέρας και ώρας, δημιουργήθηκε γιατί δεν βρίσκαμε κάτι σε vanilla JavaScript, ορισμένα ανάλογα script που κυκλοφορούν και μπορέσαμε να βρούμε, ανακαλύψαμε ότι είναι μάλλον περίπλοκα και τα περισσότερα χρησιμοποιούν εξωτερικές βιβλιοθήκες, κάτι που μας οδήγησε στην δημιουργία αυτού το απλού προγράμματος.

Η ιδέα πάρθηκε από το https://ionicframework.com/docs/api/datetime όπου είναι μια εξαιρετική βιβλιοθήκη, toolkit, γραμμένη σε TypeScript για Angular framework, React library, Vue framework, το demo που έχουν για την επιλογή ώρας https://ionicframework.com/docs/api/datetime#time-selection μας έδωσε το έναυσμα να φτιάξουμε κάτι ανάλογο, χωρίς φυσικά να εντάξουμε όλες τις παραμετροποιήσεις και τις δυνατότητες που έχει το ionic framework.

Πριν ξεκινήσουμε να δημιουργούμε ρίξαμε μια ματιά σε άλλα παρεμφερή script όπως το
Timeless Picker το οποίο και αυτό είναι γραμμένο σε TypeScript και για Angular applications. Από το δοκιμαστικό του συγκεκριμένου script https://github-twnpso.stackblitz.io πήραμε αρκετές ιδέες για το πως θα μπορούσαμε να εφαρμόσουμε το δικό μας μίνι datetime selection.

Άλλα script που είδαμε είναι τα παρακάτω
https://demo.mobiscroll.com/javascript/datetime
https://www.jqueryscript.net/blog/best-date-time-picker.html
https://codepen.io/tag/date-picker

Τέλος δημιουργήσαμε το κυριολεκτικά tiny script (μόνο 7960 bytes) uncompressed και unmagnified.

To script TimeSelection για να δημιουργηθεί παίρνει μόνο τρεις παραμέτρους.

1. Το div που θα εμφανιστεί
2. Το έτος που θα ξεκινήσει
3. Και το έτος που θα τελειώσει (optional)

Υποστηρίζει click, mouse wheel, touch, σε οπουδήποτε στοιχείο της επιλογής της ημερομηνίας, Έτος, μήνα, ημέρα, ώρα, λεπτά.

θα θέλαμε να τονίσουμε ότι για την χρησιμοποίηση του wheel και του touch ο picker πρέπει να εμφανίζεται σε κάποιο fixed popup, ειδάλλως μετακινείτε ολόκληρη η σελίδα.

Επίσης δεν γίνεται κάποιος έλεγχος για το αν η ημερομηνία που θα επιλεχθεί είναι σωστή.
Πχ κάποιος μπορεί να επιλέξει 30 Φεβρουαρίου, που φυσικά δεν υφίσταται, αυτό πολύ εύκολα μπορεί να διορθωθεί αλλά το αφήσαμε για κάποιο άλλο project.

Το μέγεθος και η εμφάνιση του είναι σταθερά, αλλά φυσικά μπορεί να αλλαχθούν μέσω του CSS.

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