datepicker range

by azaret

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap-datepicker3.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/js/bootstrap-datepicker.min.js"></script>
<div class="container">
  <div class="well">
    <h1>Select your booking dates:</h1>
    <div class="date-range">
      <div class="checkin-picker"></div>
      <div class="checkout-picker"></div>
    </div>
    <p>
      <a class="btn btn-success" href="#" role="button">
        Search availabilities from <span id="display-checkin"></span>
        to <span id="display-checkout"></span>
      </a>
    </p>
  </div>
</div>

CSS

.well {
  margin-top: 20px;
}

h1 {
  margin-top: 0;
  font-size: 22px;
}

.date-range {
  margin: auto;
  text-align: center;
}

.date-range > div {
  display: inline-block;
  margin: 10px;
}

p {
  text-align: right;
  margin-bottom: 0;
}

.is-selected {
  background-color: #286090;
  color: white;
}

.is-selected:hover {
  background-color: #204d74 !important;
}

.is-between {
  border-radius: 0 !important;
  background-color: #5599d4;
  color: white;
}

.is-between:hover {
  background-color: #204d74 !important;
}

.checkin-picker .active,
.checkout-picker .is-selected {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.checkout-picker .active,
.checkin-picker .is-selected {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.disabled {
  color: #d8d8d8 !important;
}

JavaScript

let checkin_date, checkin_div, checkin_dp,
  checkout_date, checkout_div, checkout_dp;

// function for udpating displayed date in button
function update() {
  if (checkin_date !== undefined) {
    $('#display-checkin').html(checkin_date.toLocaleDateString());
  }
  if (checkout_date !== undefined) {
    $('#display-checkout').html(checkout_date.toLocaleDateString());
  }
}

// create checkin datepicker
checkin_div = $('.checkin-picker').datepicker({
  autoclose: false,
  beforeShowDay: function(date) {
    if (checkout_date !== undefined) {
      // disabled date selection for day after checkout date
      if (date > checkout_date) {
        return false;
      }
      // display checkout date in checkin datepicker
      if (date.getDate() === checkout_date.getDate() &&
        date.getMonth() === checkout_date.getMonth() &&
        date.getFullYear() === checkout_date.getFullYear()) {
        return {
          classes: 'is-selected'
        };
      }
    }
    // display range dates in checkin datepicker
    if (checkin_date !== undefined && checkout_date !== undefined) {
      if (date > checkin_date && date < checkout_date) {
        return {
          classes: 'is-between'
        };
      }
    }
    // display checkin date
    if (checkin_date !== undefined) {
      if (date.getDate() === checkin_date.getDate() &&
        date.getMonth() === checkin_date.getMonth() &&
        date.getFullYear() === checkin_date.getFullYear()) {
        return {
          classes: 'active'
        };
      }
    }
    return true;
  }
});

// save checkin datepicker for later
checkin_dp = checkin_div.data('datepicker');

// update datepickers on checkin date change
checkin_div.on('changeDate', (event) => {
  // save checkin date
  checkin_date = event.date;
  // update checkout datepicker so range dates are displayed
  checkout_dp.update();
  checkin_dp.update();
  update();
});

// create checkout datepicker
checkout_div = $('.checkout-picker').datepicker({
  autoclose:...