使用2个日期字段尝试获取日期差异的JQuery UI日期选择器_Jquery_Datepicker

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

jquery

使用2个日期字段尝试获取日期差异的JQuery UI日期选择器,jquery,datepicker,Jquery,Datepicker,我有两个JQuery日期字段到达离开到达日期不能是今天的日期-我在javascript中使用minDate:1对其进行排序出发日期必须始终至少比抵达日期提前2天。我原以为minDate:3行得通，但那是今天的日期。如果用户在arrival字段中选择tomorrows date，则效果良好，但如果用户选择将来的到达日期，则会中断。我需要出发日期来参考到达日期，并将其提前2天作为用户可以选择的最短日期，基本上在预订此酒店时，用户不能停留一晚，需要2晚分钟最后，我还需要在第三个文本字段中计算

我有两个JQuery日期字段

到达

离开

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

出发日期必须始终至少比抵达日期提前2天。我原以为minDate:3行得通，但那是今天的日期。如果用户在arrival字段中选择tomorrows date，则效果良好，但如果用户选择将来的到达日期，则会中断。我需要出发日期来参考到达日期，并将其提前2天作为用户可以选择的最短日期，基本上在预订此酒店时，用户不能停留一晚，需要2晚分钟

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

我确信这个示例并不完美，但这里有一个工作演示，其中包含您所需的大部分内容，使用just和：


日期选择器&；差别
var datepick=function（）{
var偏离=$（“#偏离”）；
var arrival=$（“#arrival”）；
var nights=$（“#nights”）；
var triggeringElement=$（此值）；
var departureDate=离开日期选择器（“getDate”）；
var minArrivalDate=新日期（）；
如果（离开日期！=null）{
minArrivalDate.setDate（departureDate.getDate（）+2）；
}否则{
minArrivalDate.setDate（minArrivalDate.getDate（）+1）；
}
到达日期选择器（“选项”、“minDate”、“minArrivalDate”）；
var arrivalDate=arrival.datepicker（“getDate”）；
if（出发日期！=null&&arrivalDate！=null&&triggeringElement.attr（“id”）！=“夜晚”）{
var一天=1000*60*60*24；
var difference=Math.ceil（（arrivalDate.getTime（）-departureDate.getTime（））/oneDay）；
夜晚。val（差异）；
}else if（departureDate！=null&&triggeringElement.attr（“id”）=“nights”）{
var nightsenter=parseInt（nights.val（））；
如果（夜间发送>=2）{
var newArrivalDate=新日期（）；
newArrivalDate.setDate（departureDate.getDate（）+nightsEntered）；
到达日期选择器（“设置日期”，newArrivalDate）；
}否则{
警报（“夜间必须大于2。”）；
}
}
}
$（函数（）{
$（“出发，到达”）。日期选择器({
onSelect：日期选择
});
$（“#夜”）。更改（日期选择）；
日期选择（）；
});
离开
进站
夜晚

玩一玩，看看你是否可以将类似的东西集成到你的应用程序/网站中。

我认为到达和离开的功能应该颠倒/交换。我刚刚更改了标签，事情变得更清楚了，但现在代码看起来是错的。

如果出发日期不固定在当月，那么夜晚就不能正确添加出发日期。

例如，今天的日期是2月25日。如果我将出发日期设置为3月11日，并将其固定为5晚，那么抵达日期将返回2月16日，必须是3月16日

很高兴它为您服务！如果您满意，请将此标记为正确答案！注意minArrivalDate.setDate（departureDate.getDate（）+2）；在一个月的某一天而不是某一天进行操作。使用getTime（）和setTime（）并添加毫秒数而不是天数。

<!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>