Calendar 10K

Κώδικας, πληροφορίες, ερωτήσεις και απαντήσεις σχετικές με την JavaScript.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

Calendar 10K

Δημοσίευση από skeftomilos » 29 Αύγ 2006 02:21

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

Υπάρχουν πολλά διαθέσιμα JavaScript Calendars στο Internet, άλλα δωρεάν και άλλα όχι. Εδώ παρουσιάζω ένα δικής μου κατασκευής, που αν και σχετικά απλό έχει μερικά ωραία χαρακτηριστικά. Κατ' αρχήν δεν ανοίγει σε popup παράθυρο αλλά σε absolutely positioned div. Μπορεί να τοποθετηθεί κάτω από το σχετικό textbox, ή κάτω από από το button που προκαλεί το άνοιγμα. Εμφανίζεται και κλείνει γρήγορα, και είναι ελαφρύ σε byte-size (λιγότερο από 10KB μαζί με τα εικονίδια). Αλλά ας δούμε πρώτα το API και συνεχίζουμε μετά με τις λεπτομέρειες. Υπάρχει μία βασική μέθοδος, η Calendar.open():

Κώδικας: Επιλογή όλων

Calendar.open(button, target, yearButtons)
button: το HTML element κάτω από το οποίο θα εμφανιστεί το calendar
target: το textbox που θα δεχτεί την ημερομηνία που επέλεξε ο χρήστης
yearButtons: μία boolean τιμή για το αν θα εμφανιστούν κουμπιά προηγούμενο/επόμενο έτος (default false)

Όταν ανοίγει κάτω από το κουμπί φαίνεται έτσι:

Εικόνα

...ενώ όταν ανοίγει κάτω από το textbox φαίνεται έτσι:

Εικόνα

Υπάρχει ακόμα μία χρήσιμη μέθοδος, η Calendar.fixDate():

Κώδικας: Επιλογή όλων

var strFixedDate = Calendar.fixDate(strDate)
Η μέθοδος αυτή διορθώνει μία πληκτρολογημένη τιμή ώστε να έχει το ίδιο format με τις ημερομηνίες του Calendar. Για παράδειγμα μετατρέπει το "30-7-6" σε "30/07/2006". Η κύρια χρήση της είναι στο συμβάν onchange του textbox:

Κώδικας: Επιλογή όλων

onchange="this.value=Calendar.fixDate(this.value)"
Μπορείτε να δείτε εδώ ένα demo με το Calendar σε λειτουργία. Το πρώτο έχει κουμπιά προηγούμενο/επόμενο έτος, ενώ το δεύτερο όχι. Το τρίτο είναι disabled, αλλά αυτό δεν οφείλεται σε κάποια λειτουργία του Calendar, παρά στον HTML/CSS κώδικα της demo σελίδας: Live Demo

Κώδικας και demo σε μορφή zip: calendar.zip

Μερικά ακόμα στοιχεία για το Calendar.

- Οι ημερομηνίες, τα tooltips, τα λεκτικά και το date format είναι στα ελληνικά. Δεν έχει σχεδιαστεί να υποστηρίζει πολλαπλά cultures.
- Το παρατεταμένο πάτημα στα κουμπιά προηγούμενος/επόμενος μήνας/έτος προκαλεί γρήγορη εναλλαγή των μηνών/ετών.
- Το Calendar κλείνει με την επιλογή ημερομηνίας, ή με κλικ σε οποιοδήποτε άλλο σημείο του document.
- Είναι σχεδιασμένο να μπορεί να συνεργαστεί με άλλες JS libraries. Το namespace Calendar είναι το μοναδικό ίχνος που αφήνει στο global namespace της σελίδας. Αν υπάρξει ανάγκη μπορεί να αλλαχτεί σε οτιδήποτε, με ένα case-sensitive find-replace. Ακόμα η παγίδευση του document.onmousedown γίνεται με addEventListener/attachEvent.
- Το μοναδικό ίχνος που αφήνει στο CSS namespace είναι η κλάση calendarglobalclass.
- Θεωρητικά είναι εύκολα customizable μέσω του CSS που το συνοδεύει. Στο συγκεκριμένο πακέτο το CSS είναι embedded μέσα στη JavaScript για ευκολία στο deployment, με αποτέλεσμα οι επεμβάσεις στο CSS να μην είναι πολύ εύκολες. Αν κανείς θέλει χωριστά τα τμήματα JS και CSS, θα δω τι μπορώ να κάνω. :)
- Συμπιεσμένος με GZip ο κώδικας πέφτει κάτω από 3KB. Αυτό σημαίνει ότι περιλαμβάνοντας το αρχείο σε χωριστό script tag δεν είναι η μάλλον η καλύτερη επιλογή. Ενσωματώνοντας τον κώδικα στο υπάρχον αρχείο JS της σελίδας (ή μέσα στην ίδια τη σελίδα), η απόδοση θα είναι λογικά καλύτερη.
- Ο CSS κώδικας γράφεται στη σελίδα άμεσα με την εκτέλεση του script. Λογικά το script θα βρίσκεται στο τμήμα head της σελίδας, αλλά κι αν είναι κάπου στο body δε θα υπάρξει πρόβλημα. Μόνο που δε θα πρέπει να βρίσκεται μέσα σε ένα <a> tag (το έκανα αυτό το λάθος!).

Μερικά από τα calendars που κυκλοφορούν στο internet είναι τα παρακάτω. Όπως βλέπετε δε φοβάμαι τη σύγκριση. :) Για να βρείτε καλύτερο Calendar θα χρειαστεί μάλλον να βάλετε το χέρι στην τσέπη. ;)

- Cut & Paste Date Time Picker
- CalendarXP 58$
- Date Time Picker
- Basic Date Picker (για ASP.NET)
- Tigra Calendar (από δώ έκλεψα χρώματα και images :D)
- Calendar (για ASP.NET) 299$
- Calendar (για ASP.NET) 99$
- InputDateTime (για ASP.NET) 399$
- The DHTML / JavaScript Calendar (GPL)
- Zapatec Calendar 59$ ή link-back
- Ace Calendar 29,95$
- DatePicker Control
- CodeThatCalendar
- Jason's Date Input Calendar
- r.a.d. calendar 299$
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Άβαταρ μέλους
cherouvim
Script Master
Δημοσιεύσεις: 3137
Εγγραφή: 13 Ιούλ 2005 22:56
Τοποθεσία: Athens, Greece
Επικοινωνία:

Calendar 10K

Δημοσίευση από cherouvim » 29 Αύγ 2006 07:56

Ωραίος!

Εγώ χρησιμοποιώ μία custom έκδοση του http://tanny.ica.com/ica/tko/test.nsf/calpopup.htm που είναι ένα calendar του Tanny O'Haley, μετατροπή από το http://www.totallysmartit.com/examples/ ... simple.asp και συνδιασμένο με το καταπληκτικό dateparse του Simon Willison - http://simon.incutio.com/archive/2003/1 ... rDateInput


Από αυτά που είπες, το μόνο που με εντυπωσίασε (λόγω των features) ήταν το The DHTML / JavaScript Calendar. Βέβαια είναι ψιλομεγάλο.

Άβαταρ μέλους
Banavas
Script Master
Δημοσιεύσεις: 1367
Εγγραφή: 21 Νοέμ 2004 20:25
Επικοινωνία:

Calendar 10K

Δημοσίευση από Banavas » 29 Αύγ 2006 09:23

Πάρα πολύ ωραίο!

Μήπως γίνεται να μας δώσεις και κάποια έκδοση για τρία dropdown box αντί για textbox;

Ένα επιπλέον χαρακτηριστικό θα ήταν να μπορείς να του δίνεις κάποιες ημερομηνίες ή περιοχές ημερομηνιών που να είναι ανενεργές (μη επιλέξιμες).
Happy coding....
Μάρκος
http://lasernet.gr

LightForce
WebDev Moderator
Δημοσιεύσεις: 3812
Εγγραφή: 13 Απρ 2003 23:49

Calendar 10K

Δημοσίευση από LightForce » 29 Αύγ 2006 22:40

το είδα, είναι πολύ ωραίο, μπράβο skeftomilos.

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

Calendar 10K

Δημοσίευση από skeftomilos » 30 Αύγ 2006 01:02

Thanks all of you για τα καλά λόγια. :)

Μία δοκιμή για τριπλό dropdown:

- date-triplo.htm

Ο κώδικας του Simon Willison είναι πραγματικά πολύ αξιόλογος, και ακόμα περισσότερο για την εποχή που γράφηκε. Η ιδέα επιλογής ημερομηνίας με λεξούλες today, yester, next Fri κ.λπ. αρκετά ενδιαφέρουσα, ιδιαίτερα ως πρόκληση για υλοποίηση. Η πρακτική χρησιμότητα μάλλον αμφίβολη ωστόσο, τουλάχιστον για εφαρμογές με ευκαιριακούς χρήστες.
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Άβαταρ μέλους
Banavas
Script Master
Δημοσιεύσεις: 1367
Εγγραφή: 21 Νοέμ 2004 20:25
Επικοινωνία:

Calendar 10K

Δημοσίευση από Banavas » 30 Αύγ 2006 01:29

Όταν λέμε παραλαγή για τριπλό dropdown εννοούμε να υπάρχει το calentar και αντί να γεμίζει ένα textbox να γεμίζει τα τρία dropdown.
Happy coding....
Μάρκος
http://lasernet.gr

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

Calendar 10K

Δημοσίευση από skeftomilos » 30 Αύγ 2006 02:45

Ουπς, το κατάλαβα λάθος. Το σενάριο είναι να έχει ο χρήστης δύο τρόπους να επιλέξει ημερομηνία; Too-much μου φαίνεται. Εκτός αυτού αυτά τα dropdowns είναι αρκετά βαριά σε bytes, οπότε αν υπάρχουν καμιά εικοσαριά τέτοια date controls βλέπω τη σελίδα να βουλιάζει από το βάρος τους. :)
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Άβαταρ μέλους
Banavas
Script Master
Δημοσιεύσεις: 1367
Εγγραφή: 21 Νοέμ 2004 20:25
Επικοινωνία:

Calendar 10K

Δημοσίευση από Banavas » 30 Αύγ 2006 14:15

έχω γράψει μια εφαρμογή για κρατήσεις και τη δουλεύω με τα τρια dropdown. Τωρα πλέον είναι αδύνατον να το αλλάξω δε απλό text.
Πρακτικά δεν χρειάζεται το calendar αφού η δουλειά γίνεται άνετα και με τα dropdown, όλη η φασαρία (για να προστεθεί ώς εναλλακτικός τρόπος επιλογής ημερομηνίας) είναι για το εφέ γιατί όπως και να το κάνουμε είναι πολύ πιο όμορφο από τα dropdown.
Happy coding....
Μάρκος
http://lasernet.gr

Άβαταρ μέλους
PhotoPaul
Δημοσιεύσεις: 45
Εγγραφή: 26 Φεβ 2004 18:35

Calendar 10K

Δημοσίευση από PhotoPaul » 30 Αύγ 2006 14:24

Δε θα με χάλαγε να το έβαζα σαν control στο web statistics πακέτο που φτιάχνω για την πτυχιακή μου για να επιλέγει ο χρήστης τις ημερομηνίες προβολής στατιστικών.

Εσένα θα σε χάλαγε skeftomilos;

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

Calendar 10K

Δημοσίευση από skeftomilos » 30 Αύγ 2006 19:05

PhotoPaul καθόλου μα καθόλου δε με χαλάει! Θα είσαι πιθανότατα ο πρώτος που θα το χρησιμοποιήσεις, καθώς το δικό μου project που θα έμπαινε έχει κολλήσει αυτή τη στιγμή. :)

Banavas θα χρειαστεί μια μετατροπή, θα κοιτάξω αν είναι εύκολο να γίνει.
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

Calendar 10K

Δημοσίευση από skeftomilos » 31 Αύγ 2006 04:15

Η εγχείρηση ήταν επιτυχής και ο ασθενής επέζησε. :) Το API εμπλουτίστηκε με την παρακάτω εναλλακτική εκδοχή:

Κώδικας: Επιλογή όλων

Calendar.open&#40;button, date, yearButtons, callback&#41;
button: το HTML element κάτω από το οποίο θα εμφανιστεί το Calendar
date: Η αρχικά επιλεγμένη ημερομηνία του Calendar (τύπου Date)
yearButtons: μια boolean τιμή για το αν θα εμφανιστούν κουμπιά προηγούμενο/επόμενο έτος (default false)
callback: μια function που θα κληθεί όταν ο χρήστης επιλέξει ημερομηνία (η επιλεγμένη ημερομηνία θα περαστεί ως argument)

3 Dropdowns + Calendar demo
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Άβαταρ μέλους
JavaS
Δημοσιεύσεις: 103
Εγγραφή: 14 Ιαν 2004 13:10
Τοποθεσία: Βόλος

Calendar 10K

Δημοσίευση από JavaS » 31 Αύγ 2006 12:13

Πολύ καλό, μπράβο... :-)
en telh, PHP kai agios o theos.. ASP kai agia MS :P dialegeis kai perneis :P

Άβαταρ μέλους
Banavas
Script Master
Δημοσιεύσεις: 1367
Εγγραφή: 21 Νοέμ 2004 20:25
Επικοινωνία:

Calendar 10K

Δημοσίευση από Banavas » 31 Αύγ 2006 15:18

Προσπαθώ να αλλάξω τα name στα select από date1-year σε ariv_date_y
μόλις κάνω αυτή την αλλαγή το script νεκρώνει.
Τι αλλαγές πρέπει να κάνω για να αλλάξουν τα select names;
Happy coding....
Μάρκος
http://lasernet.gr

Άβαταρ μέλους
stroumfm
Δημοσιεύσεις: 52
Εγγραφή: 21 Ιαν 2007 21:58
Τοποθεσία: Κρήτη

Calendar 10K

Δημοσίευση από stroumfm » 28 Απρ 2007 20:49

Το δοκίμασα το calendar.zip κάνοντας το include σε php αρχείο.
Ενω μόνο του τρέχει κανονικά, μέσα στο php δεν δουλεύει.Γιατί;
Έχω αντιγράψει και τα 2 αρχεία και τις εικόνες μέσα στο localhost κανονικά.

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

Calendar 10K

Δημοσίευση από skeftomilos » 28 Απρ 2007 22:40

Αν κάνεις View->Source θα δεις τον κώδικα που φτάνει στον browser. Ο browser δεν ξέρει τίποτα για php και includes. Αυτό που ξέρει είναι να μετατρέπει σε χρωματιστά pixel τις οδηγίες που του στέλνει ο server, οι οποίες έχουν τη μορφή HTML, CSS και JavaScript.
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Απάντηση

Επιστροφή στο “JavaScript και Frameworks”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες