Question

$(function(){
    $('#datepicker').datepicker({

        dateFormat: 'dd/mm/yy',
        minDate: 'today',
        onSelect: function(dateText, inst) { 
            $('#handout').val(dateText);
        }


    });
});

$(function(){
    $('#datepicker2').datepicker({

        dateFormat: 'dd/mm/yy',
        minDate: 'today',
        onSelect: function(dateText, inst) { 
            $('#handin').val(dateText);
            $('#datepicker').val("");
            $('#datepicker').datepicker({'option','minDate', newDate});

        }
    });
});

我有2个jQuery日历，我想根据第一个日历选择限制第二个日历日期范围。因此，如果第一个日历选择10/07/2014，则第二个日历将更新以反映可以选择该日期之前的日期。我认为上面的datepicker2 onSelect函数中的代码会处理这个问题，但它似乎并没有。

固定此解决方案：

修正了以下内容：

    $(function(){
        $('#datepicker').datepicker({
            dateFormat: 'dd/mm/yy',
            minDate: 'today',
            onSelect: function(dateText, inst) { 
                $('#handout').val(dateText);
                $( "#datepicker2" ).datepicker( "option", "minDate", dateText );
            }
        });
    });

    $(function(){
        $('#datepicker2').datepicker({
            dateFormat: 'dd/mm/yy',
            onSelect: function(dateText, inst) { 
                $('#handin').val(dateText);
                $( "#datepicker" ).datepicker( "option", "maxDate", dateText );
            }
        });
    });

请参阅：http://jqueryui.com/datepicker/#date-range

Answer 1

您可以在SirDerpington的以下示例中找到答案。

这是两个文本框。

<input type="text" id="dt1" readonly="readonly">
<input type="text" id="dt2" readonly="readonly">

这是jquery datepicker初始化程序。

$("#dt1").datepicker({
    dateFormat: "dd-M-yy",
    minDate: 0,
    onSelect: function (date) {
        var date2 = $('#dt1').datepicker('getDate');
        date2.setDate(date2.getDate() + 1);
        $('#dt2').datepicker('setDate', date2);
        //sets minDate to dt1 date + 1
        $('#dt2').datepicker('option', 'minDate', date2);
    }
});
$('#dt2').datepicker({
    dateFormat: "dd-M-yy",
    onClose: function () {
        var dt1 = $('#dt1').datepicker('getDate');
        var dt2 = $('#dt2').datepicker('getDate');
        //check to prevent a user from entering a date below date of dt1
        if (dt2 <= dt1) {
            var minDate = $('#dt2').datepicker('option', 'minDate');
            $('#dt2').datepicker('setDate', minDate);
        }
    }
});

请参阅jsfiddle中的示例。

2个jQuery日历，根据第一个日历日期更新第二个日历

1 个答案: