Calendar 10K

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

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

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

Calendar 10K

Δημοσίευση από stroumfm » 30 Απρ 2007 00:25

Tον ειδα τον κωδικα απο το View->Source και διαβαζει κανονικα το αρχειο, εμφανιζει και το εικονιδιο αλλα οταν κανω κλικ σε αυτο υπαρχει σφαλμα στη σελιδα. Εχω βαλει στο head το....
</style><script src="calendar.js" type="text/javascript" charset="windows-1253">
</script>

και στο body το...
<table cellpadding="0" cellspacing="0">
<tr>
<td class="date">
<input name="date1" value="01/06/2006" onChange="this.value=Calendar.fixDate(this.value)">
</td>
<td class="calendar"><div class="button-wrapper">
<a id="button1" href="javascript:void(0)" onClick="Calendar.open(this, document.forms[0].date1, true);return false"> <img src="images/calendar.gif"</a></div></td>
</tr>
</table>

Μηπως χρειαζεται και τιποτα αλλο...?????????

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

Calendar 10K

Δημοσίευση από skeftomilos » 30 Απρ 2007 00:55

Το παράδειγμα προϋποθέτει ότι τo input βρίσκονται μέσα σε μια φόρμα, συγκεκριμένα στην πρώτη και ενδεχομένως μοναδική φόρμα της σελίδας. Αυτό δηλώνει το document.forms[0]. Αν δεν υπάρχει φόρμα τότε θα πρέπει να χρησιμοποιηθεί άλλος τρόπος για να αποκτηθεί ένα reference στο στοιχείο input, με πιθανότερο υποψήφιο τη document.getElementById. Παράδειγμα:

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

<table cellpadding="0" cellspacing="0">
  <tr>
    <td class="date">
      <input id="date1" value="01/06/2006" onChange="this.value=Calendar.fixDate&#40;this.value&#41;">
    </td>
    <td class="calendar"><div class="button-wrapper">
      <a id="button1" href="javascript&#58;void&#40;0&#41;" onClick="Calendar.open&#40;this, document.getElementById&#40;'date1'&#41;, true&#41;;return false"> <img src="images/calendar.gif"</a></div></td>
  </tr>
</table>
Προσοχή, στη θέση του name="date1" υπάρχει τώρα id="date1".
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

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

Calendar 10K

Δημοσίευση από stroumfm » 01 Μάιος 2007 01:43

Thanks!!
Εβαλα τον κώδικα στην πρωτη φόρμα της σελιδας και δουλεψε!!! Εγω την έβαζα στη δεύτερη...

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

Calendar 10K

Δημοσίευση από skeftomilos » 01 Μάιος 2007 13:46

Αν η φόρμα έχει όνομα, μπορείς αν προτιμάς να αναφέρεσαι σε αυτήν με το όνομά της:

<form name="contact"...
document.forms['contact']...
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

prezakis
Δημοσιεύσεις: 17
Εγγραφή: 20 Φεβ 2008 19:13

Calendar 10K

Δημοσίευση από prezakis » 04 Απρ 2008 02:07

Ερώτηση που ίσως φανεί πολύ απλή...έως χαζή σε σας,αλλά ήδη έχω χάσει αρκετό χρόνο ψάχνοντας την απάντηση. Για να είναι null-blank η αρχική τιμή,στο πεδίο που βάλαμε το calendar, πως πρέπει να είναι ο κώδικας?
Ευχαριστώ εκ των προτέρων.

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

Calendar 10K

Δημοσίευση από skeftomilos » 04 Απρ 2008 10:18

Αρκεί να αφήσεις κενή την τιμή του πεδίου input. Δηλαδή value="", ή ακόμα μπορείς να παραλείψεις εντελώς το attribute value.

prezakis
Δημοσιεύσεις: 17
Εγγραφή: 20 Φεβ 2008 19:13

Calendar 10K

Δημοσίευση από prezakis » 04 Απρ 2008 19:47

ΟΚ,θα το δοκιμάσω. Ευχαριστώ.

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

Calendar 10K

Δημοσίευση από cherouvim » 25 Αύγ 2008 14:02

Πως συγκρίνεται σήμερα το calendar σου με τα παρακάτω;

http://developer.yahoo.com/yui/calendar/
http://plugins.jquery.com/project/jquery-calendar

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

Calendar 10K

Δημοσίευση από skeftomilos » 25 Αύγ 2008 21:15

Κανένα από αυτά δεν είναι 10Κ, αλλά έχουν σαφώς περισσότερες δυνατότητες. Το δικό μου ημερολογιάκι δεν έχει ούτε date ranges (ημερομηνίες από έως) ούτε εμφάνιση πολλών μηνών ταυτόχρονα.

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

Calendar 10K

Δημοσίευση από cherouvim » 25 Αύγ 2008 21:29

Έψαξα 4 τέτοια και απογοητεύτηκα από όλα.
Το πιο καλό ήταν αυτό του YUI. Μειονέκτημα του η χάλια υποστήριξη για date format.

Το jQuery jCal σάπιο τελείως. Κώδικας html δεμένος μέσα στα events. Αποτέλεσμα να μη μπορείς (χωρίς major refactorings στο lib) να του πεις "δείξε αυτή την ημ/νία". Μέχρι και τα iterations στα localisation day/month arrays ήταν λάθος, που εμφάνιζε και τα extra functions που είχανε μπει στο Array.prototype από τα άλλα libs. LOL.

Το άλλο που είδα δεν μπορούσε να εμφανίσει παραπάνω από ένα calendar ταυτόχρονα στην οθόνη (είχε υποστήριξη, αλλά κάποια χαζά globals χαλούσαν όλο το παιχνίδι).

Και ένα άλλο δεν μπορούσες να το καρφώσεις στην οθόνη για πάντα. Είναι by default "date picker" για ένα input.

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

Calendar 10K

Δημοσίευση από skeftomilos » 25 Αύγ 2008 23:19

Ορισμένα από αυτά τα θέματα τα έχω προσέξει. Το Calendar 10K είναι καθαρό, μόνο ένα όνομα στο namespace της JavaScript και άλλο ένα στο namespace του CSS. Κανένα id στην παραγόμενη HTML. Όταν κληθεί η Calendar.open δημιουργείται ένα div element, μπαίνει στο innerHTML ο generated HTML κώδικας, και το div γίνεται append στο body:

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

var divElement = document.createElement&#40;'div'&#41;
...
divElement.innerHTML = processHTML&#40;this&#41;
...
document.body.appendChild&#40;divElement&#41;
Μετά συνδέονται τα συμβάντα. Για το σκοπό αυτό έχω χρησιμοποιήσει ένα custom attribute (onaction) στην παραγόμενη HTML ώστε να γίνει η σύνδεση με λίγο κώδικα:

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

<a onaction="nextMonth"...
...
for &#40;var i = 0, link; link = links&#91;i&#93;; i++&#41; &#123;
  var action = link.getAttribute&#40;'onaction'&#41;
  link.onaction = this.events&#91;action&#93;
  hookButton&#40;link&#41;
&#125;
Πάντως από κατασκευής ούτε το Calendar 10K μπορεί να έχει ταυτόχρονα δύο ανοιχτά instances στη σελίδα. Το σκεπτικό είναι ότι λειτουργεί σαν dropdown. Τα dropdowns είναι ανοικτά όσο έχουν το focus, μόλις γίνει κλικ κάπου αλλού κλείνουν αυτόματα. Για το σκοπό αυτό έχω παγιδεύσει το mousedown του document, ώστε να κλείνει το τυχόν ανοιχτό instance. Νομίζω ότι από άποψη user interface αυτή είναι φιλική και αναμενόμενη συμπεριφορά για το χρήστη.

Προσωπικά το Calendar 10K το έχω χρησιμοποιήσει πολύ σε διάφορες διαχειριστικές σελίδες, και μόνο μια φορά σε site. Κάποτε ένας developer μου ζήτησε ένα πολύπλοκο customization ώστε να υποστηρίζει επιλογή ημερομηνιών έναρξης λήξης για κρατήσεις ξενοδοχείων (με διάφορους περιορισμούς ως προς την επιλογή των ημερών, με αποκλεισμό περιόδων και ανάλογο feedback για τον user), αλλά η προσπάθεια ήταν πολύ φιλόδοξη και έμεινε στη μέση.

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

Calendar 10K

Δημοσίευση από cherouvim » 26 Αύγ 2008 00:22

Ωραίος!

Το dateformat μπορείς να το ρυθμίσεις απέξω;

Επίσης πρόσεξε το error που σκάει αν στο input γράψω xx/11/2000 και πατήσω το calendar.

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

Calendar 10K

Δημοσίευση από skeftomilos » 26 Αύγ 2008 02:23

Το format δεν αλλάζει απ' έξω γιατί υπάρχουν εσωτερικά δύο ρουτίνες μετατροπής από και προς ημερομηνία, οι οποίες πρέπει να είναι συμβατές μεταξύ τους.

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

function stringToDate&#40;s&#41; &#123;...
function toShortDateString&#40;d&#41; &#123;...
Η πρώτη από τις δύο έχει το bug που εντόπισες. Δεν ξέρω πώς μπορεί να γίνει flexible το format.

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

Calendar 10K

Δημοσίευση από cherouvim » 26 Αύγ 2008 09:21

Χρειάζεσαι κάποιο dateformat component το οποίο θα έχει μία format(date) και μία parse(string).

Το θέμα είναι αν:

1) θα σπαταλήσεις πολλά KBs για να κάνεις το component αυτό πολύ flexible με το να παίρνει κατά τη κατασκευή του ένα οποιοδήποτε String της μορφής:

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

yyyy/mm/dd
mm/dd/yyyy
m/d/yyyy
dd/mm/yyyy
d/m/yyyy
mm/dd/yy
m/d/yy
dd/mm/yy
d/m/yy
yyyy-mm-dd
mm-dd-yyyy
m-d-yyyy
dd-mm-yyyy
d-m-yyyy
mm-dd-yy
m-d-yy
dd-mm-yy
d-m-yy
yyyy.mm.dd
mm.dd.yyyy
m.d.yyyy
dd.mm.yyyy
d.m.yyyy
mm.dd.yy
m.d.yy
dd.mm.yy
d.m.yy
...
Και τα πράγματα δυσκολεύουν αν θές να έχεις mmm ή mmmm το οποίο μάλλον αντιστοιχεί σε Feb και February. Το οποίο φυσικά θα σε αναγκάσει να βάλεις και extension point για το localization.

ή

2) θα προσφέρεις απλά μερικά constants για τα supported formats. πχ
ISO_8601_DATE
EU_DATE
US_DATE
...


Τα Calendars τα χρησιμοποιώ πακέτο με το dateparse του simon (demo), το οποίο βέβαια έχει παλιώσει. Πρέπει να θέτεις το dateformat constant πριν χρησιμοποιήσεις τις αντίστοιχες format και parse.

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

Calendar 10K

Δημοσίευση από skeftomilos » 01 Σεπ 2008 01:38

Αυτή θα ήταν η ιδανική προσέγγιση, αλλά ο στόχος μου ήταν να καλύψω την ανάγκη μιας δεδομένης στιγμής για ένα αξιοπρεπές ημερολόγιο με ελληνικό culture. Όχι μόνο το date format αλλά και τα ονόματα των μηνών και των ημερών της εβδομάδας είναι hardcoded μέσα στο script και δεν αλλάζουν εύκολα. Αν κάποια στιγμή χρειαστώ διγλωσσία μάλλον θα κάνω λίγες τσαπατσούλικες αλλαγές στο υπάρχον για να κάνω τη δουλειά μου.

Απάντηση

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

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

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