我有 2 个 JQuery 日期字段
- Arrival
- 离开
到达日期不能是今天的日期 - 我在 javascript 中使用 minDate: 1 进行了排序
出发日期必须至少早于抵达日期 2 天。我认为 minDate: 3 可以工作，但那是查询今天的日期。如果用户在到达字段中选择明天的日期，则它可以正常工作，但如果用户选择将来的到达日期，则它会中断。我需要出发日期来参考到达日期，并将其提前 2 天作为用户可以选择的最短日期，本质上，在预订这家酒店时，用户不能住一晚，需要 2 晚分钟。
最后，我还需要将抵达日期和出发日期之间的晚数计算到第三个文本字段中。因此，当输入出发日期时，它会自动在第三个文本字段中输入住宿天数。我还需要它反向工作，如果用户决定输入住宿天数，我需要相应更改出发日期。
我确信这个例子并不完美，但这里有一个工作演示，其中包含您需要的大部分内容，仅使用jQuery和jQuery UI 日期选择器:
<!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 & 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>
尝试一下，看看是否可以将类似的东西集成到您的应用程序/网站中。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
