Question

我有2个JQuery日期字段

到达
出发

抵达日期不能是今天的日期 - 我在javascript中使用minDate：1对其进行了排序

出发日期必须至少在抵达日期前2天。我认为minDate：3会起作用，但那可以查询今天的日期。如果用户在到达字段中选择明天日期但是如果用户在将来选择到达日期则它会中断。我需要出发日期参考到达日期并提前2天将其移动到用户可以选择的最短日期，基本上在预订这家酒店时，用户不能入住一晚，需要2晚。

最后，我还需要计算到达日期和出发日期之间的晚数到第3个文本字段。因此，当输入出发日期时，它会自动输入第3个文本字段中的夜晚数。我还需要它反向工作，如果用户决定投入夜数，我需要相应地改变出发日期。

Answer 1

我确信这个例子并不完美，但这里只是使用jQuery和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>

使用它并查看是否可以将类似内容集成到您的应用/网站中。

Answer 2

我认为应该反转/交换到达和离开的功能。我只是改变了标签，事情变得更加清晰，但现在代码看起来不对了。

Answer 3

当出发日期在当前月份没有固定时，那么晚上没有正确添加出发日期。例如今天的日期25日。如果我在11月3日设定出发日期并将其固定5晚，则到达日期返回16日。它必须是第三次行军

尝试获取日期差异的JQuery UI DatePicker使用2个日期字段

3 个答案: