JQuery UI DatePicker使用2个日期字段尝试获取日期差异 [英] JQuery UI DatePicker using 2 date fields trying to get date difference
问题描述
我有2个JQuery日期字段
I have 2 JQuery Date fields
- 到达
- 离开
到达日期不能是今天的日期 - 我得到这个使用minDate排序：1在javascript
Arrival date must not be todays date - i got this sorted using minDate: 1 in the javascript
出发日期必须至少提前2天到达。我认为minDate：3会工作，但是查询今天的日期。如果用户在到达字段中选择明天的日期，但如果用户未来选择到达日期，则该功能将会正常工作。我需要出发日期参考到达日期，并将其提前2天作为用户选择的最低日期，基本上在预订此酒店时，用户不能入住一晚，需要2晚分。
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.
最后，我还需要计算到达日期和出发日期之间的夜数到第3个文本字段。所以当输入出发日期时，它会自动输入第三个文本字段中的夜晚数。我还需要它反向工作，如果用户决定放置多少晚，我需要离开日期才能相应地更改。
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.
推荐答案
我确定这个例子并不完美，但是这是一个大部分需要的工作演示，只需 jQuery 和 jQuery UI Datepicker ：
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 & 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.
这篇关于JQuery UI DatePicker使用2个日期字段尝试获取日期差异的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
