All geek questions in one place

JQuery UI DatePicker using 2 date fields trying to split date

I have 2 jQuery Date fields

  • Arrival
  • Departure

Arrival date should not be today - I got this sorting using minDate: 1 in javascript

Departure date should always be at least 2 days prior to arrival date. I thought minDate: 3 would work, but this is a matter with today's date. it works great if the user selects the date of tomorrow in the arrival field, but if the user selects the arrival date in the future, it breaks. I need a departure date in order to indicate the arrival date and move it 2 days in advance, as the minimum date that the user can choose, in fact, when booking this hotel the user cannot stay for one night, it takes 2 nights.

Finally, I also need to calculate the number of nights between the arrival date and the departure date in the third text box. therefore, when the departure date is entered, it automatically enters the number of nights in the third text box. I also need it to work in the reverse order, if the user decides to set the number of nights, I need the departure date to change accordingly.

+3
source share
3 answers

I am sure this example is not perfect, but here is a working demo with most of what you need using only jQuery and 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 it and see if you can integrate something like this into your application / website.

+8

, /. , , .

+1

when the departure date is not fixed in the current month, the night is not added properly with the departure date. for example, today is dated February 25th. If I set the departure date to March 11 and fixed it for 5 nights, then the return date is February 16th. where should he be March 16

+1
source

Source: https://habr.com/ru/post/1714930/

More articles:


All Articles