Home/ Questions/Q 321683
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-12T08:52:06+00:00

I have 2 JQuery Date fields Arrival Departure Arrival date must not be todays

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0