示例:http://jsfiddle.net/ulitka911/KQrs5/
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Select a Date Range</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
</head>
<body>
<label > How Long </label>
<select id="weeks">
<option value="1">1 Week</option>
<option value="2">2 Weeks</option>
<option value="3">3 Weeks</option>
<option value="4">4 Weeks</option>
</select>
<label for="from">From</label>
<input type="text" id="from" name="from">
<label for="to">to</label>
<input type="text" id="to" name="to">
<script>
$(function() {
var weeks;
var daysInWeek = 7;
var totalDays;
weeks = $("#weeks").val();
totalDays = weeks * daysInWeek;
$(function() {
$( "#from, #to" ).datepicker({
minDate: new Date(),
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 2,
onSelect: function( selectedDate ) {
if(this.id == 'from'){
var dateMin = $('#from').datepicker("getDate");
var rMin = new Date(dateMin.getFullYear(), dateMin.getMonth(),dateMin.getDate() + 1);
var rMax = new Date(dateMin.getFullYear(), dateMin.getMonth(),dateMin.getDate() + totalDays);
//$('#to').datepicker("option","minDate",rMin);
//$('#to').datepicker("option","maxDate",rMax);
$('#to').val($.datepicker.formatDate('mm-dd-yy', new Date(rMax)));
}
}
});
});
});
</script>
</body>
</html>
所以我的挑战是:
我有选择,顾客可以选择1至4周。 我的总天数总是保持在7,但计算不正确。我知道选择后必须“刷新”值,但我不知道ajax,我不想刷新整个页面来进行正确的计算(我甚至不确定我写的是不是正确的做法)它)。
我一直在尝试研究突出显示悬停日期的例子 http://jsfiddle.net/eFzG4/,但它突出了一周的一周,我试图突出显示7到28之间的天数,我甚至不确定是否可以突出显示2个月的日期。
< / LI> 醇>非常感谢你的时间。
答案 0 :(得分:1)
我认为您需要在代码中添加此功能
$("#weeks").on("change",function(){
totalDays = $("#weeks").val() * daysInWeek;
alert(totalDays)
})