Create dependent datepickers using bootstrap-datepicker

Question

I need to create two date pickers using the datepicker by https://github.com/uxsolutions/bootstrap-datepicker so that date selected in the first datepicker will be used as start date of second. The dates before the date picker of first one disabled in the second.

The HTML for first date-picker:

 <div class="col-sm-6 row-margin" id="div-last-day">
 <div class="input-group date">
 <input type="text" class="test-width form-control input-xs" name="last-day-worked" id="last-day" placeholder="Select your last Date" readonly><span class="input-group-addon input-xs"><i class="glyphicon glyphicon-calendar"></i></span>

Second date-picker:

  <div class="col-sm-6 row-margin" id="div-separation-day">
     <div class="input-group date">
      <input type="text" class="test-width form-control input-xs" name="separation-day-worked" id="separation-day" placeholder="Select your Separation Date" readonly><span class="input-group-addon input-xs"><i class="glyphicon glyphicon-calendar"></i></span>
 </div>
  </div>

Here is some of my code:

$("#div-last-day .input-group.date").datepicker({
            format: "dd-M-yyyy",
            todayHighlight: true,
            autoclose: true,
        });
        $('#div-last-day .input-group.date').datepicker()
        .on('changeDate', function (e) {
            var lastdate = $('#div-last-day .input-group.date').datepicker('getDate');
            var date = new Date(lastdate);
            var curr_date = date.getDate();
            var curr_month = date.getMonth();
            var curr_year = date.getFullYear();
            perfect_date = curr_date + "-" + m_names[curr_month]
            + "-" + curr_year;
            $("#div-separation-day .input-group.date").datepicker({
                format: "dd-M-yyyy",
                todayHighlight: true,
                startDate: perfect_date,
                autoclose: true,
            });
        });

Here is the fiddle I am working on https://jsfiddle.net/5tpn12L8/

The fiddle works for the first time but when I change the date in the first date-picker it doesn't update the second date-picker.

Answer 1

You can do it as below:

HTML:

<input class="form-control"  id="txtFromDate" />
<input class="form-control" id="txtToDate" />

JQUERY:

$(document).ready(function () {
    $("#txtFromDate").datepicker({
        format: 'dd/mm/yyyy',
        autoclose: 1,
        //startDate: new Date(),
        todayHighlight: false,
        //endDate: new Date()
    }).on('changeDate', function (selected) {
        var minDate = new Date(selected.date.valueOf());
        $('#txtToDate').datepicker('setStartDate', minDate);
        $("#txtToDate").val($("#txtFromDate").val());
        $(this).datepicker('hide');
    });

    $("#txtToDate").datepicker({
        format: 'dd/mm/yyyy',
        todayHighlight: true,
        //endDate: new Date()
    }).on('changeDate', function (selected) {
        $(this).datepicker('hide');
    });
});

jsfiddle DEMO