Web Analytics Made Easy -
StatCounter
Συμπληρωση πεδιων με jquery calendar και υπολογισμος ημερων – Devacron.com

Συμπληρωση πεδιων με jquery calendar και υπολογισμος ημερων

 Αν επισκεφθειτε μια ιστοσελιδα αεροπορικης εταιρειας ο πιθανοτερος λογος ειναι για να δειτε τιμες ή διαθεσιμοτητα των εισητηριων. Οποτε το πρωτο που κανει ο επισκεπτης ειναι να εισαγει σε καποια πεδια τις ημερομηνιες που τον ενδιαφερουν. Σκεφτηκα λοιπον να ανεβασω ενα μικρο κομματι κωδικα που κανει αυτο ακριβως, εισαγει δηλαδη σε δυο πεδια τις ημερομηνιες που καποιος επιλεγει χωρις να χρειαστει να τις πληκτρολογησει.Αυτο γινεται μεσω ενος ημερολογιου. Ετσι το μονο που χρειαζεται ειναι να πλοηγηθει στην  ημερα που επιθυμει και να την επιλεξει.

calendar

 Τελος προσθεσα και ενα μικρο κομματι κωδικα που οταν καλειται(μεσω κουμπιου) επιστρεφει τον αριθμο των ημερων μεταξυ των δυο επιλεγμενων ημερομηνιων. Ας δουμε τον κωδικα και θα εξηγησω στο τελος τα κυριοτερα.

Πανω πανω λοιπον καλουμε σε script tags  την jquery και το plugin του ημερολογιου. Εγω επελεξα το jquery Tools αλλα υπαρχουν αρκετα αλλα που κανουν την ιδια δουλεια. Περισσοτερες πληροφοριες για το συγκεκριμενο plugin θα βρειτε εδω. Αφου φτιαξουμε και λιγο το styling μεσω css , περναμε στην html. Δυο απλα input πεδια με type=”date” και ενα κουμπακι. Και τωρα στο ζουμι, μεσω jquery επιλεγουμε τα input και τα περναμε σε μεταβλητες. Επισης δημιουργουμε μια μεταβλητη που εχει την τιμη 1000*60*60*24, δηλαδη ο χρονος μιας ημερας σε milliseconds. Θα το χρειαστουμε παρακατω.

 Επειτα δημιουργουμε μια function την οποια βαζουμε στο κουμπακι οταν σε αυτο γινει κλικ(μεσω του bind-click). Στην function παιρνουμε τις ημερομηνιες που εβαλε ο χρηστης (μεσω της .val()) και τις κανουμε split. Αυτο που μενει το περναμε σε ενα νεο date object. Μπορειτε να διαβασετε για αυτο το object αναλυτικοτερα εδω. Τελος κανουμε τον υπολογισμο, στην προκειμενη περιπτωση αφαιρεση την αναχωρηση απο την επιστροφη. Επειδη ομως το object μας δινει τον χρονο σε ms , διαιρουμε το αποτελεσμα της αφαιρεσης με την μεταβλητη one_day που δημιουργησαμε νωριτερα. Και ολα αυτα σε μια Math.ceil η οποια στρογγυλοποιει προς τα επανω. Τελος μεσω ενος if else statement  δινουμε το αναλογο μηνυμα. Θα βρειτε ολο τον κωδικα στο παρακατω αρχειο ή αν θελετε μπορειτε να το τρεξετε εδω.

calendar

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.