如何基于另一个日期约束jQuery-ui datepicker的最小和最大日期

Question

我想知道如何在入住日期之间设置退房日期.就像我们选择六月(当月是二月)和第十五天一样.因此它授权选择30天(30限制)之间的日期.所以结束日期是:7月15日.这里我们有一个代码:

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/black-tie/jquery-ui.css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>
<style type="text/css">
body{ font: 60.0% "Trebuchet MS", sans-serif; margin: 50px; }
</style>
<script type="text/javascript">
    $(function() {
        $('#from').datepicker({
            numberOfMonths: 2,
            firstDay: 1,
            dateFormat: 'DD dd-mm-yy',
            minDate: '0',
            maxDate: '+2Y',
            onSelect: function(dateStr) {
                var min = $(this).datepicker('getDate');
                $('#to').datepicker('option', 'minDate', min || '0');
                datepicked();
            } 
        });
        $('#to').datepicker({
            numberOfMonths: 2,
            firstDay: 1,
            dateFormat: 'DD dd-mm-yy',
            minDate: '0',
            maxDate: '+2Y',
            onSelect: function(dateStr) {
                var max = $(this).datepicker('getDate');
                $('#from').datepicker('option', 'maxDate', max || '+2Y');
                datepicked();
            } 
        });
    });
    var datepicked = function() {
        var from = $('#from');
        var to = $('#to');
        var nights = $('#nights');
        var fromDate = from.datepicker('getDate')
        var toDate = to.datepicker('getDate')
        if (toDate && fromDate) {
            var difference = 0;
            var oneDay = 1000 * 60 * 60 * 24;
            var difference = Math.ceil((toDate.getTime() - fromDate.getTime()) / oneDay);
            nights.val(difference);
        }
    }
</script>
<input type="text" id="from" name="from" size="28" style="width:194px; /*Tag Style*/" value="" >
<input type="text" id="to" name="to" size="28" style="width:194px; /*Tag Style*/" value="" >
<input type="text" id="nights" name="nights" size="4" style="width:50px; /*Tag Style*/" value="" readonly="readonly">

我们的主要动机是制作此代码,办理登机手续,退房和住宿.其中办理入住日期可以是2012-2013的任何一个月,退房日期仅为30天后的入住日期,且总晚数仅为30晚.

Answer 1

看看这个演示.我在onSelect事件中添加了一些行,如下所示:

    onSelect: function(dateStr) {
        var d1 = $(this).datepicker("getDate");
        d1.setDate(d1.getDate() + 0); // change to + 1 if necessary
        var d2 = $(this).datepicker("getDate");
        d2.setDate(d2.getDate() + 30); // change to + 29 if necessary
        $("#to").datepicker("setDate", null);
        $("#to").datepicker("option", "minDate", d1);
        $("#to").datepicker("option", "maxDate", d2);
        datepicked();
    }

根据我对住宿业务的理解,日期应该是包容性的 - 即2012年6月/ 15日+ 30晚应该是2012年6月14日.但是我已经按照你在前几行中提到的例子进行了跟踪.