How can I addclass for selected days?

Question

I have booking form which I created with jquery ui date range and I want to add class my first and last days.

for example I want to add first-day-selected class for my first day and I want to add last-day-selected class for my last date.

And if possible I want to give another class between these days or I want to give a opacity but this is not necessary

I search something but I couldn't apply for my datepicker.

function datePicker() {

  var dateFormat = "DD/MM/YY",
    from = $("#checkin,.checkin").datepicker({
      numberOfMonths: 2,
      firstDay: 1,
      minDate: 0,
      onSelect: function(selectedDate) {
        window.setTimeout($.proxy(function() {
          $(this).parents(".book-holiday").find("#checkout,.checkout").focus();
        }, this), 10);
        var yenitarih = new Date();
        var date = $(this).datepicker('getDate');
        var checkoutStartDate = new Date(new Date(date).setDate(date.getDate() + 1));
        var checkoutEndDate = new Date(new Date(date).setDate(date.getDate() + 15));
        console.log(checkoutEndDate);
        $("#checkout,.checkout").datepicker("option", "minDate", checkoutStartDate);
        $("#checkout,.checkout").datepicker("option", "maxDate", checkoutEndDate);
      },
      isTo1: true,
      beforeShowDay: function(date) {
        var selectedDate = $(this).datepicker('getDate'),
          fromDate = from.datepicker('getDate');

        if (!fromDate || !selectedDate) {
          return [true]
        }
        var dateClass = '';
        if (date > fromDate && date < selectedDate) {
          dateClass = 'between-date';

        } else if (+date == +selectedDate) {
          dateClass = 'end-date';
        }
        return [true, dateClass];

      }
    });
  $("#checkout,.checkout").datepicker({
    numberOfMonths: 2,
    firstDay: 1,
    minDate: 0,
    isTo1: true,
    beforeShowDay: function(date) {
      var selectedDate = $(this).datepicker('getDate'),
        fromDate = from.datepicker('getDate');

      if (!fromDate || !selectedDate) {
        return [true]
      }
      var dateClass = '';
      if (date > fromDate && date < selectedDate) {
        dateClass = 'between-date';

      } else if (+date == +selectedDate) {
        dateClass = 'end-date';
      }
      return [true, dateClass];

    }
  });
}

datePicker();

.end-date a.ui-state-active {
  color: yellow;
}

.between-date a.ui-state-default {
  color: blue!important;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" />

<div class="book-holiday">
  From <input type="text" class="checkin" /> To <input type="text" class="checkout" />
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

Answer 1

You can use beforeShowDay to add classes to specific dates. Following adds classes to $("#checkout") datepicker only after you open it a second time and both dates have been selected. This is example as I'm not sure exactly the behavior you are looking for:

function datePicker() {

  var dateFormat = "DD/MM/YY",
    from = $("#checkin,.checkin").datepicker({
      numberOfMonths: 2,
      firstDay: 1,
      minDate: 0,
      onSelect: function(selectedDate) {
        window.setTimeout($.proxy(function() {
          $(this).parents(".book-holiday").find("#checkout,.checkout").focus();
        }, this), 10);
        var yenitarih = new Date();
        var date = $(this).datepicker('getDate');
        var checkoutStartDate = new Date(new Date(date).setDate(date.getDate() + 1));
        var checkoutEndDate = new Date(new Date(date).setDate(date.getDate() + 15));
        console.log(checkoutEndDate);
        $("#checkout,.checkout").datepicker("option", "minDate", checkoutStartDate);
        $("#checkout,.checkout").datepicker("option", "maxDate", checkoutEndDate);
      },
      isTo1: true,
    });
  $("#checkout,.checkout").datepicker({
    numberOfMonths: 2,
    firstDay: 1,
    minDate: 0,
    isTo1: true,
    beforeShowDay: function(date) {
      var selectedDate = $(this).datepicker('getDate'),
        fromDate = from.datepicker('getDate');

      if (!fromDate || !selectedDate) {
        return [true]
      }
      var dateClass = '';
      if (date > fromDate && date < selectedDate) {
        dateClass = 'between-date';

      } else if (+date == +selectedDate) {
        dateClass = 'end-date';
      } else if (+date == +fromDate) {
        dateClass = 'start-date';
      }
      return [true, dateClass];

    }
  });
}

datePicker();

.end-date a.ui-state-active {
  color: yellow;
}

.between-date a.ui-state-default {
  color: blue!important;
}

.start-date.ui-state-disabled {
  opacity: 1!important;
}

.start-date .ui-state-default {
  color: yellow!important;
  background: green!important;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" />

<div class="book-holiday">
  From <input type="text" class="checkin" /> To <input type="text" class="checkout" />
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>