title: How can I addclass for selected days?
body: <p>I have booking form which I created with jquery ui date range and I want to add class my first and last days.</p>
  
  <p>for example I want to add <code>first-day-selected</code> class for my first day and I want to add  <code>last-day-selected</code> class for my last date. </p>
  
  <p>And if possible I want to give another class between these days or I want to give a opacity but this is not necessary</p>
  
  <p>I search something but I couldn't apply for my datepicker.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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 &gt; fromDate &amp;&amp; date &lt; 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 &gt; fromDate &amp;&amp; date &lt; selectedDate) {
          dateClass = 'between-date';
  
        } else if (+date == +selectedDate) {
          dateClass = 'end-date';
        }
        return [true, dateClass];
  
      }
    });
  }
  
  datePicker();</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.end-date a.ui-state-active {
    color: yellow;
  }
  
  .between-date a.ui-state-default {
    color: blue!important;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" /&gt;
  
  &lt;div class="book-holiday"&gt;
    From &lt;input type="text" class="checkin" /&gt; To &lt;input type="text" class="checkout" /&gt;
  &lt;/div&gt;
  
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>