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.

Answer 2

here is solution - check snippet below

jquery code:-

$(function () {
            $("#txtFrom").datepicker({
                numberOfMonths: 1,
                dateFormat: "dd-M-yy",
                onSelect: function (selected) {
                    var dt = new Date(selected);
                    dt.setDate(dt.getDate() + 1);
                    $("#txtTo").datepicker("option", "minDate", dt);
                }
            });
            $("#txtTo").datepicker({
                numberOfMonths: 1,
                dateFormat: "dd-M-yy",
                onSelect: function (selected) {
                    var dt = new Date(selected);
                    dt.setDate(dt.getDate() - 1);
                    $("#txtFrom").datepicker("option", "maxDate", dt);
                }
            });
        });

$(function () {
            $("#txtFrom").datepicker({
                numberOfMonths: 1,
                dateFormat: "dd-M-yy",
                onSelect: function (selected) {
                    var dt = new Date(selected);
                    dt.setDate(dt.getDate() + 1);
                    $("#txtTo").datepicker("option", "minDate", dt);
                }
            });
            $("#txtTo").datepicker({
                numberOfMonths: 1,
                dateFormat: "dd-M-yy",
                onSelect: function (selected) {
                    var dt = new Date(selected);
                    dt.setDate(dt.getDate() - 1);
                    $("#txtFrom").datepicker("option", "maxDate", dt);
                }
            });
        });

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

<table border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td>
                From:
            </td>
            <td>
                <input type="text" id="txtFrom" />
            </td>
            <td>
                &nbsp;
            </td>
            <td>
                To:
            </td>
            <td>
                <input type="text" id="txtTo" />
            </td>
        </tr>
    </table>

Answer 3

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


    $('#date_added').datepicker({

        onSelect: function(dateStr) {

//Modification done here ;; 
           var dt = new Date(dateStr);
            dt.setDate(dt.getDate() + 1);
            $("#date_modified").datepicker("option", "minDate", dt);

        },
        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");
        //Modification done here ;;
            var dt = new Date(dateStr);
            dt.setDate(dt.getDate() - 1);
            $("#date_added").datepicker("option", "maxDate", dt);

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

});


</script>