每次更改其他日期选择器值时，如何更改bootstrap-datepicker开始时间

Question

我有2个datepicker输入（一个是调用leavefrom，另一个是离开HR离开应用程序）。

我想要做的是当用户输入日期leavefrom时，leaveto输入的通过日期将在发生日期时禁用开始日期。

问题是，当我尝试使用jQuery时，代码只检测一次更改，并且在不刷新浏览器的情况下不会更新到新的leavefrom日期。

以下是表单示例：

以下是来自

的HTML代码

<script type="text/javascript">
$(document).ready(function () {
  $('.disable-pass-date').datepicker().on('changeDate', function (ev) {
    $('#leavefrom').change();
  });
  $('#leavefrom').change(function () {
    leavefrom =  $('.clear-date1').datepicker('getDate');
    if(leavefrom != 0){
      $('input[name=duration]').val(1)
      $('.disable-pass-date2').datepicker({ 
        startDate: leavefrom
      });
    }
  });
});
</script>

<link href="http://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://momentjs.com/downloads/moment.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<script src="http://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>

<!-- Leave from input-->
<div class="form-group">
  <label for="middle-name" class="control-label col-md-3 col-sm-3 col-xs-12">Leave From <span class="required">*</span></label>
  <div class="col-md-6 col-sm-6 col-xs-12">
    <div id="datepicker-custom" class="input-group date disable-pass-date clear-date1" data-provide="datepicker">
      <input type="text" class="form-control" name="leavefrom" id="leavefrom" data-rel="datepicker" autocomplete="off">
      <div class="input-group-addon" >
        <i class="fa fa-calendar" aria-hidden="true"></i>
      </div>
      <div class="input-group-addon" style="margin-right: 0px;padding-left: 0px;padding-right: 0px;">
        <a href="#" class="clear1" style="padding-top: 10px;padding-bottom: 10px;padding-right: 10px;padding-left: 10px">Clear</a>
      </div>
    </div>
  </div>
</div>

<!-- Leave to input-->
<div class="form-group">
  <label for="middle-name" class="control-label col-md-3 col-sm-3 col-xs-12">Leave To <span class="required">*</span></label>
  <div class="col-md-6 col-sm-6 col-xs-12">
    <div id="datepicker-custom" class="input-group date .disable-pass-date disable-pass-date2 clear-date2 " data-provide="datepicker">
      <input type="text" class="form-control" name="leaveto" id="leaveto" data-rel="datepicker" autocomplete="off">
      <div class="input-group-addon">
        <i class="fa fa-calendar" aria-hidden="true"></i>
      </div>
      <div class="input-group-addon" style="margin-right: 0px;padding-left: 0px;padding-right: 0px;">
        <a href="#" class="clear2" style="padding-top: 10px;padding-bottom: 10px;padding-right: 10px;padding-left: 10px">Clear</a>>

      </div>
    </div</div>
    </div>

Answer 1

试用此代码

$('.disable-pass-date2').datepicker('remove');

在change函数

上重新初始化datepicker

DEMO