Menu
I have 2 JQuery Date fields
Arrival date must not be todays date - i got this sorted using minDate: 1 in the javascript
The Departure date must always be a minimum of 2 days ahead of arrival date. i thought minDate: 3 would work but thats querying off of todays date. it works fine if the user picks tomorrows date in the arrival field but if the user picks an arrival date in the future it breaks. I need the departure date to reference the arrival date and move it 2 days ahead as the minimum date the user can pick, essentially when booking this hotel the user can not stay for one night, 2 night min is required.
finally i also need to calculate the number of nights between the arrival date and departure date into a 3rd text field. so when the departure date is entered it automatically inputs number of nights in 3rd text field. I also need it to work in reverse, if a user decides to put in number of nights i need the departure date to change accordingly.
I'm sure this example isn't perfect, but here's a working demo with most of what you require, using just jQuery and the jQuery UI Datepicker:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title>Datepicker & Difference</title>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7/themes/redmond/jquery-ui.css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7/jquery-ui.min.js"></script>
<script type="text/javascript">
var DatePicked = function() {
var departure = $("#departure");
var arrival = $("#arrival");
var nights = $("#nights");
var triggeringElement = $(this);
var departureDate = departure.datepicker("getDate");
var minArrivalDate = new Date();
if (departureDate != null) {
minArrivalDate.setDate(departureDate.getDate() + 2);
} else {
minArrivalDate.setDate(minArrivalDate.getDate() + 1);
}
arrival.datepicker('option', 'minDate', minArrivalDate);
var arrivalDate = arrival.datepicker("getDate");
if (departureDate != null && arrivalDate != null && triggeringElement.attr("id") != "nights") {
var oneDay = 1000*60*60*24;
var difference = Math.ceil((arrivalDate.getTime() - departureDate.getTime()) / oneDay);
nights.val(difference);
} else if (departureDate != null && triggeringElement.attr("id") == "nights") {
var nightsEntered = parseInt(nights.val());
if (nightsEntered >= 2) {
var newArrivalDate = new Date();
newArrivalDate.setDate(departureDate.getDate() + nightsEntered);
arrival.datepicker("setDate", newArrivalDate);
} else {
alert("Nights must be greater than 2.");
}
}
}
$(function() {
$("#departure, #arrival").datepicker({
onSelect: DatePicked
});
$("#nights").change(DatePicked);
DatePicked();
});
</script>
</head>
<body>
<div>
<label for="departure">Departure</label>
<input type="text" id="departure" name="departure" />
</div>
<div>
<label for="arrival">Arrival</label>
<input type="text" id="arrival" name="arrival" />
</div>
<div>
<label for="nights">Nights</label>
<input type="text" id="nights" name="nights" />
</div>
</body>
</html>
Play around with that and see if you can integrate something similar into your app/site.
150
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
