How to disable dates in second datetimepicker based on next days in the first one

Question

I use the bootstrap date picker and I use two textboxes to search by date from-to, want to the second textbox give me the days after the days in the first textbox, any help, please.

HTML :

<form action="{{url('search/ticket')}}" method="get">
    <div class="col-md-6 col-sm-4">
        <input type="text" class="timepickerfrom form-control" name="remember" placeholder="Search From" id="txtStartDate" required>
    </div>
    <div class="col-md-6 col-sm-4">
       <input type="text" class="timepickerto form-control" name="remember" placeholder="Search To" id="txtEndDate" required>
       <button type="submit" class="basic-button">Submit</button>
    </div> 
</form>

javascript :

 <script type="text/javascript">
 $(document).ready(function () {
    $('.timepickerfrom').datetimepicker({
        format: 'YYYY-MM-DD',
    });

    $('.timepickerto').datetimepicker({
        format: 'YYYY-MM-DD',
    });
  });
  </script>  

Answer 1

I found the solution if anyone wants help.

It's called the linked datepicker

https://eonasdan.github.io/bootstrap-datetimepicker/#linked-pickers

Answer 2

You have to use the change event on the input itself if you want to respond to manual input, because the changeDate event is only for when the date is changed using the datepicker.

Try this code:

$(document).ready(function () {
    $('.timepickerfrom').datepicker({
        format: 'yyyy-mm-dd',

    }).on('changeDate', function(selected){

        var minDate = new Date(selected.date.valueOf());
        $('.timepickerto').datepicker('setStartDate', minDate);
    });

    $('.timepickerto').datepicker({
        format: 'yyyy-mm-dd',
    });

});