CODEWITHSUNDEEP
jquerydatepicker
Jack Wells
Jack Wells

Reputation:

JQuery UI DatePicker using 2 date fields trying to get date difference

I have 2 JQuery Date fields

  1. Arrival
  2. Departure

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.

Upvotes: 3

Views: 10656

Answers (3)

kabirul islam
kabirul islam

Reputation: 11

when the departure date is not fixed on current month then the night doesn't properly added with departure date. for example today's date 25 th feb .if i set the departure date on 11 th march and fixed it for 5 nights then arrival date return 16th feb. where it has to be 16th march

Upvotes: 1

Greg
Greg

Reputation:

I think the functionality of the arrival and departure shoud be reversed/swaped. I just changed over the labels and things became clearer but now the code looks wrong.

Upvotes: 1

Jason Berry
Jason Berry

Reputation: 2469

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 &amp; 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.

Upvotes: 8

Related Questions