datepicker start and end date validation not working on change

Admin 1
Viewed 459

I am using a bootstrap date picker. when I am selecting the start date, the end date validation works fine for the first time. but when I change the start date again end date limit remains the same, does not change.

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<script !src="">
  // Include Date Range Picker -->
  let format = 'yyyy-mm-dd';
  // Start date
  $('.start-date').datepicker({
    startDate: new Date(),
    format: format,
    autoclose: true
  });
  // End date
  $('.start-date').on("change", function() {
    $('.end-date').val('');
    $('.end-date').datepicker({
      startDate: $('.start-date').val(),
      format: format,
      autoclose: true
    });
  })

</script>

in on change function i am getting change value of $('.start-date').val() but limit of end-date remains same.

bootstrap-4 jquery javascript
3 Answers

Hey you shouldn't place $('.end-date').datepicker at $('.start-date').on('change'... listener, because it will ever attach datepicker on every change of .start-date.

Place .end-date datepicker outside of 'onchange' just keeping $('.end-date').val(''); to clean field.

Tell us if everything will run.

user_54904360

Try out this solution.

let format = 'yyyy-mm-dd';
// Start date
$('.start-date').datepicker({
    startDate: new Date(),
    format: format,
    autoclose: true
});

$('.end-date').datepicker({
    startDate: new Date(),
    format: format,
    autoclose: true
});

$('.start-date').datepicker().on("changeDate", function() {
    let newStartDate = $('.start-date').datepicker('getDate');

    $('.end-date').datepicker('update', '');
    $('.end-date').datepicker('setStartDate', newStartDate);
})
user_102906730 

$(document).ready(function() {
  $("#startDate").datepicker({
    format: 'yyyy-mm-dd',
    startDate: new Date(),
    autoclose: true,
    autoclose: true,
  }).on('changeDate', function(selected) {
    var minDate = new Date(selected.date.valueOf());
    $('#endDate').datepicker('setStartDate', minDate);
  });

  $("#endDate").datepicker({
    format: 'yyyy-mm-dd',
    autoclose: true,
  }).on('changeDate', function(selected) {
    var minDate = new Date(selected.date.valueOf());
    $('#startDate').datepicker('setEndDate', minDate);
  });
});
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" rel="stylesheet" />
<form autocomplete="off">
  <input type="text" id="startDate">
  <input type="text" id="endDate">
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>

Note: You can use changeDate event.

user_57343870
Related