title: How to set minDate and maxDate for bootstrap datetimepicker on change
body: <p>I want to ask users for a date range using bootstrap datetimepicker. There is a field for the start date and another one for the end date, and they're initialized to the day before current day. On change to the start date, I want to set the minDate of end date to the value of start date; and on change to end date I want to set the max date of start date to the value of end date. But I cannot get this working. </p>
  
  <p>Here is the JS code:</p>
  
  <pre><code>var start = $('.start');
  var end = $('.end');
  var d = new Date();
  var month = d.getMonth() + 1;
  var day = d.getDate() - 1;
  var year = d.getFullYear();
  
  start.datetimepicker(
      {
          useCurrent: false,
          defaultDate: month + '-' + day + '-' + year + ' ' + '12:00AM',
          autoClose: true
       })
   .on('change', function (selected) {
      end.minDate(selected.?????????); // What should replace the question marks?
   });
  end.datetimepicker(
      {
          useCurrent: false,
          defaultDate: month + '-' + day + '-' + year + ' ' + '11:59PM',
          autoClose: true
       })
   .on('change', function (selected) {
      start.maxDate(selected.???????); // What should replace the question marks?
   });
  </code></pre>
  
  <p>and the HTML:</p>
  
  <pre><code>&lt;div class="col-sm-3"&gt;
      &lt;div class="form-group"&gt;
          &lt;h4&gt;Start Date&lt;/h4&gt;
          &lt;div class="input-group date"&gt;
              &lt;input type="text" data-data-fomat="MM-DD-YYY h:mm A" data-ng-model="startDate" id="Calendar1" class="start form-control" placeholder="Choose a date" /&gt;
              &lt;span class="input-group-addon"&gt;
                  &lt;span class="glyphicon glyphicon-calendar"&gt;&lt;/span&gt;
              &lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="col-sm-3"&gt;
      &lt;div class="form-group"&gt;
          &lt;h4&gt;End Date&lt;/h4&gt;
          &lt;div class="input-group date"&gt;
              &lt;input type="text" data-data-fomat="MM-DD-YYY h:mm A" data-ng-model="endDate" id="Calendar2" class="end form-control" placeholder="choose a date" /&gt;
              &lt;span class="input-group-addon"&gt;
                  &lt;span class="glyphicon glyphicon-calendar"&gt;&lt;/span&gt;
              &lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I've found tickets about similar operation on <code>datepicker</code>, but that is done differently from <code>datetimepicker</code> so please don't mark duplicate unless you find similar question for <code>datetimepicker</code>.</p>