Search code examples
jqueryhtmldatepickerbootstrap-datepicker

How change the bootstrap-datepicker start time every time every time I change the other date picker value

I have 2 datepicker input(one is call leavefrom and the other one leaveto for HR leave application).

What I want to do is when the user enter the date leavefrom, the pass date for leaveto input will be disable start base on the leaveto date.

The problem is when I try with jQuery the code only detect the change once and do not update to new leavefrom date without refresh the browser.

Below is form example:

Below is HTML code from 

<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>

Solution

  • Try this code

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

    Re-initialize datepicker on change function

    DEMO