挂起多个日期的日期选择器突出显示最多24个

时间:2014-01-19 05:49:55

标签: javascript jquery datepicker

示例: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. 我有选择,顾客可以选择1至4周。 我的总天数总是保持在7,但计算不正确。我知道选择后必须“刷新”值,但我不知道ajax,我不想刷新整个页面来进行正确的计算(我甚至不确定我写的是不是正确的做法)它)。

  2. 我一直在尝试研究突出显示悬停日期的例子 http://jsfiddle.net/eFzG4/,但它突出了一周的一周,我试图突出显示7到28之间的天数,我甚至不确定是否可以突出显示2个月的日期。

    < / LI>

    非常感谢你的时间。

1 个答案:

答案 0 :(得分:1)

我认为您需要在代码中添加此功能

$("#weeks").on("change",function(){
   totalDays = $("#weeks").val() * daysInWeek;
   alert(totalDays)
})

修改Please take a look at this