link two datepickers with jquery

Question

I have two datepickers one of them is for a start date and the other is for an end date. My problem is when i select a start date ,the end date datepicker should be after this date so that i should lock the other dates and if I select an end date input, the start date input should be after the end date.

HTML:

<div class="row">
    <div class="col-sm-5">
        <div class="form-group">
            <label class="control-label col-sm-5" for="date_added">Date
                Courrier</label>
            <div class="input-group date">
                <span class="input-group-addon"><i
                    class="fa fa-calendar"></i></span><input id="date_added"
                    type="text" class="form-control" value="03/04/2014">
            </div>
        </div>
    </div>
    <div class="col-sm-5">
        <div class="form-group">
            <label class="control-label col-sm-7" for="date_modified">Date
                Arrivée</label>
            <div class="input-group date">
                <span class="input-group-addon"><i
                    class="fa fa-calendar"></i></span><input id="date_modified"
                    type="text" class="form-control" value="03/06/2014">
            </div>
        </div>
    </div>    
</div>

Javascript:

<script>

$(document).ready(function() {
    var start_date=$('#date_added').val();
    var end_date=$('#date_modified').val();


    $('#date_added').datepicker({

        onSelect: function(dateStr) {

            start_date=$(this).val();
            $('#date_modified').datepicker('option', 'minDate', new Date(start_date));

        },
        todayBtn : "linked",
        keyboardNavigation : false,
        forceParse : false,
        calendarWeeks : true,
        autoclose : true
    });
    console.log("jjj")
    $('#date_modified').datepicker({
        onSelect: function(dateStr) {
            alert("Date is within two weeks");

            end_date=$(this).val();
            $('#date_added').datepicker('option', 'minDate', new Date(end_date));

        },
        todayBtn : "linked",
        keyboardNavigation : false,
        forceParse : false,
        calendarWeeks : true,
        autoclose : true
    });

});


</script>

So what should I change

Answer 1

Attach the handlers of the changeDate event to the #date_added and #date_modified controls.

var fromTimeInput = $('#date_added');
var toTimeInput = $('#date_modified');
var fromTime = fromTimeInput.val();
var toTime = toTimeInput.val();

fromTimeInput.datepicker({
    keyboardNavigation : false,
    forceParse : false,
    calendarWeeks : true,
    autoclose : true,
    endDate: toTime
});
toTimeInput.datepicker({
    keyboardNavigation : false,
    forceParse : false,
    calendarWeeks : true,
    autoclose : true,
    startDate: fromTime
});
fromTimeInput.on("changeDate", function (e) {
    toTimeInput.datepicker('setStartDate', e.date);
});
toTimeInput.on("changeDate", function (e) {
    fromTimeInput.datepicker('setEndDate', e.date);
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>
<div class="row">
    <div class="col-sm-5">
        <div class="form-group">
            <label class="control-label col-sm-5" for="date_added">Date
                Courrier</label>
            <div class="input-group date">
                <span class="input-group-addon"><i
                    class="fa fa-calendar"></i></span><input id="date_added"
                    type="text" class="form-control" value="03/04/2014">
            </div>
        </div>
    </div>
    <div class="col-sm-5">
        <div class="form-group">
            <label class="control-label col-sm-7" for="date_modified">Date
                Arrivée</label>
            <div class="input-group date">
                <span class="input-group-addon"><i
                    class="fa fa-calendar"></i></span><input id="date_modified"
                    type="text" class="form-control" value="03/06/2014">
            </div>
        </div>
    </div>    
</div>

To change displayed date format, day of the week start and other use options of datepicker.