从第一个日期选择器定义第二个日期选择器的开始日期

Question

我正在努力拥有两个引导日期选择器，一旦用户单击第一个日期选择器上的任何日期，第二个日期选择器的开始日期应该是在第一个日期选择器中选择的，在此之前所有日期都应该被禁用。

但我肯定走错路了。变量 diffDays 的值没有反映在第二个日期选择器的 startDate 字段中，因此开始日期没有反映在第二个日期中-选择器。

下面是代码：

function checkDate(startDate) {
    var oneDay = 24 * 60 * 60 * 1000;
    var res = startDate.value.split("/");
    var firstDate = new Date(res[2], res[1] - 1, res[0]);
    var todayFullDate = new Date();
    var diffDays = Math.round(Math.abs((firstDate.getTime() - todayFullDate
            .getTime())
            / (oneDay)));

    $('#date2').datepicker({

        startDate: '+'+diffDays+'d'
                });

}
$(function() {

    $('#date1').datepicker({
        format : "dd/mm/yyyy",
        required : true,

    });

    $("#register-form").validate({

        rules : {
            date1 : "required"
        },

        messages : {
            date1 : "Please enter a valid date"
        },

        submitHandler : function(form) {

            form.submit();
        }
    });

});

Answer 1

您可以使用简单的methods 和options 及其插件，如下所示：

changeDate、setStartDate 和 setEndDate 是您需要使用的 3 个重要的东西。

changeDate 是 event，即 fired when the date is changed。

setStartDate 和 setEndDate 是分别为datepickers 设置startdate 和enddate 的两种方法。您需要将changeDate 事件附加到datepickers 并为各自的datepickers 设置相应的开始和结束日期，如下所示

$('.start').datepicker({
    autoclose:true
}).on('changeDate',function(e){
    //on change of date on start datepicker, set end datepicker's date
    $('.end').datepicker('setStartDate',e.date)
});

$('.end').datepicker({
    autoclose:true
}).on('changeDate',function(e){
    //on change of date on end datepicker, set start datepicker's date
    //e.date will have selected date value.
    $('.start').datepicker('setEndDate',e.date)
})

DEMO HERE