Define start date of second date picker from first date picker

问题

I am working on having two bootstrap date pickers, once the user clicks on any date on the first date-picker the start date of the second date picker should be that, selected in the first date picker and before that all dates should be disabled .But certainly I am going some wrong way I could not figure out.The value of the variable diffDays is not being reflected in the startDate field of the second date-picker and therefore the start date is not being reflected in second date-picker . Thanks in advance.

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();
        }
    });

});

回答1:

You can make use of simple methods and options provided along with their plugin as below:

changeDate, setStartDate and setEndDate are the 3 important things you need to make use of.

changeDate is an event which is fired when the date is changed.

setStartDate and setEndDate are the 2 methods which sets startdate and enddate for respective datepickers. You need to attach changeDate event to both the datepickers and set corresponding start and end dates for respective datepickers as below

$('.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

来源：https://stackoverflow.com/questions/37101656/define-start-date-of-second-date-picker-from-first-date-picker

标签

javascript

twitter-bootstrap

datepicker