ZeroZek ZeroZek - 3 years ago 243
jQuery Question

Bootstrap DP date compare

How to compare date_from with date_to from those 2 datepicker functions?

var datepicker = $.fn.datepicker.noConflict();
$.fn.bootstrapDP = datepicker;

$("#date_from").bootstrapDP({format: 'yyyy-mm-dd', endDate: '+1d'})
.on('changeDate', function (event) {
$("#date_from").bootstrapDP('hide')
$($("#date_to")[0]).focus()
});


$("#date_to").bootstrapDP({format: 'yyyy-mm-dd', endDate: '+1d'})
.on('changeDate', function (event) {
$("#date_to").bootstrapDP('hide')
});

Answer Source

You could use date-range constructor of Bootstap Datepicker:

$('.input-daterange').datepicker();
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>

<div class="input-group input-daterange">
    <input id="started" type="text" class="form-control" value="10/01/2017">
    <div class="input-group-addon">to</div>
    <input id="finished" type="text" class="form-control" value="10/02/2017">
</div>

If you set started date value that more then finished date, the finished date value will be corrected automaticaly. But if minimum differense between dates should be equal to 1 day, then you need to use custom changeDate event handler:

$('.input-daterange').datepicker().on('changeDate', function(e) {
  var started = $('#started').datepicker('getDate');
  var finished = $('#finished').datepicker('getDate');
  var date;
  if (started >= finished) {
    if (e.target.id == 'started') {
      date = new Date(started);
      date.setDate(started.getDate() - 1);
      $('#started').datepicker('setDate', date);
    }
    if (e.target.id == 'finished') {
      date = new Date(finished);
      date.setDate(finished.getDate() + 1);
      $('#finished').datepicker('setDate', date);
    }
  }
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>

<div class="input-group input-daterange">
  <input id="started" type="text" class="form-control" value="10/01/2017">
  <div class="input-group-addon">to</div>
  <input id="finished" type="text" class="form-control" value="10/02/2017">
</div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download