change date in bootstrap datepicker calendar using date from another calendar on same page?

Question

I have two basic bootstrap datepicker calendars on my page. I am trying to understand how I can use changeDate event to set the date of calendar no.2 according to the date I select on calendar no.1. I'd like to set a date three months ahead of the first calendar's month.

Here is the HTML of the calendar:

<div class="profile-info-row">
                            <div class="profile-info-name"> Date of Birth *</div>
                            <div class="profile-info-value">
                                <div id="sandbox-container">
                                    <span class="input-icon input-icon-right">
                                        <input type="text" type="text" name="dob" id="dob" class="form-control">
                                        <i class="ace-icon fa fa-calendar blue"></i>
                                    </span>
                                </div>
                            </div>
                        </div>

Here is the script of calendar:

<script type="text/javascript">
            //datepicker plugin
        $('#sandbox-container input').datepicker({
            format: "dd-mm-yyyy",
            todayBtn: "linked",
            todayHighlight: true,
            weekStart: 1,
            autoclose: true
        });

EDIT: This question is about the BOOTSTRAP datepicker, not the JQUERY one. I think it's a common misconception in most questions

I think this post can help you: http://stackoverflow.com/questions/30456270/bootstrap-datepicker-change-mindate-startdate-from-another-datepicker — Oscar LT, Mar 09 '16 at 15:32
Possible duplicate of [jQuery UI datepicker: add 6 months to another datepicker](http://stackoverflow.com/questions/11137616/jquery-ui-datepicker-add-6-months-to-another-datepicker) — devlin carnate, Mar 09 '16 at 15:47
@devlincarnate: This question is about the bootstrap version. The link you gave is about the jquery version. — omrakhur, Mar 09 '16 at 16:03

M. Ruiz · Accepted Answer · 2016-03-09T15:59:12.517

//datepicker plugin
$('#sandbox-container input').datepicker({
  format: "dd-mm-yyyy",
  todayBtn: "linked",
  todayHighlight: true,
  weekStart: 1,
  autoclose: true
}).on('changeDate', function(e) {
  // `e` here contains the extra attributes
  var newDate = new Date(e.date.setMonth(e.date.getMonth()+3));
  $('#second-sandbox-container input').datepicker('setDate', newDate);
});

http://bootstrap-datepicker.readthedocs.org/en/latest/events.html#changedate
http://bootstrap-datepicker.readthedocs.org/en/latest/methods.html#setdate

change date in bootstrap datepicker calendar using date from another calendar on same page?

1 Answers1