Συμπληρωση πεδιων με jquery calendar και υπολογισμος ημερων
Αν επισκεφθειτε μια ιστοσελιδα αεροπορικης εταιρειας ο πιθανοτερος λογος ειναι για να δειτε τιμες ή διαθεσιμοτητα των εισητηριων. Οποτε το πρωτο που κανει ο επισκεπτης ειναι να εισαγει σε καποια πεδια τις ημερομηνιες που τον ενδιαφερουν. Σκεφτηκα λοιπον να ανεβασω ενα μικρο κομματι κωδικα που κανει αυτο ακριβως, εισαγει δηλαδη σε δυο πεδια τις ημερομηνιες που καποιος επιλεγει χωρις να χρειαστει να τις πληκτρολογησει.Αυτο γινεται μεσω ενος ημερολογιου. Ετσι το μονο που χρειαζεται ειναι να πλοηγηθει στην ημερα που επιθυμει και να την επιλεξει.
Τελος προσθεσα και ενα μικρο κομματι κωδικα που οταν καλειται(μεσω κουμπιου) επιστρεφει τον αριθμο των ημερων μεταξυ των δυο επιλεγμενων ημερομηνιων. Ας δουμε τον κωδικα και θα εξηγησω στο τελος τα κυριοτερα.
<html>
<head>
<title>xDev.gr - Choose dates and get the number of days off.</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://jquerytools.org/media/css/dateinput/skin1.css"/>
<style>
table{font-family:"Verdana",Times,serif;}
.maindiv{
-moz-border-radius: 8px;
border-radius: 8px;
border-color:grey;
background-image: -webkit-linear-gradient(bottom, #FFFFFF 0%, #00A3EF 100%);
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #FFFFFF), color-stop(1, #00A3EF));
background-image: -moz-linear-gradient(bottom, #FFFFFF 0%, #00A3EF 100%);
background-image: -ms-linear-gradient(bottom, #FFFFFF 0%, #00A3EF 100%);
width:510px;
height:80px;}
th{color:white;}
</style>
</head>
<body>
<div id="main" class="maindiv">
<table>
<tr>
<th>Date to fly out</th>
<th>Date to come back</th>
</tr>
<tr>
<td><input id="calendar1" type="date" /></td>
<td><input id="calendar2" type="date" /></td>
<td><input type="submit" Value="Number of days" /></td>
</tr>
</table>
</div>
<script type="text/javascript">
var one_day=1000*60*60*24;
var Departure = $("input#calendar1").dateinput();
var Arrival = $("input#calendar2").dateinput();
$(":submit").bind("click",
function getdaystrip(){
var x = Departure.val().split("/");
var y = Arrival.val().split("/");
var date1=new Date(x);
var date2=new Date(y);
var TotalDays = Math.ceil((date2-date1)/(one_day));
if (TotalDays <=0)
alert("Choose different departure date. You can't return if you never really left" );
else
alert("You will be away for " + TotalDays + " days" );
});
</script>
</body>
</html>
Πανω πανω λοιπον καλουμε σε 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 δινουμε το αναλογο μηνυμα. Θα βρειτε ολο τον κωδικα στο παρακατω αρχειο ή αν θελετε μπορειτε να το τρεξετε εδω.