如何设置课程选择日期？

Question

我有一个预订表格，我想在第一天和最后一天的课程中使用jquery ui插件给出如何做到这一点？我正在使用jquery ui datepicker，我想要在第一天和最后一天选择造型我做了所有事情，但我找不到第一天和最后一天上课的方法，有趣......

＆＃13;

＆＃13;

$(function() {
  $.datepicker.setDefaults($.datepicker.regional['tr']);

  var ilktarih = ['2017-04-20'];
  var sontarih = ['2017-12-31']
  var bostarihler = ['2017-04-20', '2017-04-21', '2017-04-22', '2017-04-23', '2017-04-24', '2017-04-25', '2017-04-26', '2017-04-27', '2017-04-28', '2017-04-29', '2017-04-30', '2017-05-01', '2017-05-02', '2017-05-03', '2017-05-04', '2017-05-05', '2017-05-06', '2017-05-07', '2017-05-08', '2017-05-09', '2017-05-10', '2017-05-11', '2017-05-12', '2017-05-13', '2017-05-14', '2017-05-15', '2017-05-16', '2017-05-17', '2017-05-18', '2017-05-19', '2017-05-20', '2017-05-21', '2017-05-22', '2017-05-23', '2017-05-24', '2017-05-25', '2017-05-26', '2017-05-27', '2017-05-28', '2017-05-29', '2017-05-30', '2017-05-31', '2017-06-01', '2017-06-02', '2017-06-03', '2017-06-04', '2017-06-05', '2017-06-06', '2017-06-07', '2017-06-08', '2017-06-09', '2017-06-10', '2017-06-11', '2017-06-12', '2017-06-13', '2017-06-14', '2017-06-15', '2017-06-16', '2017-06-17', '2017-06-18', '2017-06-19', '2017-06-20', '2017-06-21', '2017-06-22', '2017-06-23', '2017-06-24', '2017-06-25', '2017-06-26', '2017-06-27', '2017-06-28', '2017-06-29', '2017-06-30', '2017-07-01', '2017-07-02', '2017-07-03', '2017-07-04', '2017-07-05', '2017-07-06', '2017-07-07', '2017-07-08', '2017-07-09', '2017-07-10', '2017-07-11', '2017-07-12', '2017-07-13', '2017-07-14', '2017-07-15', '2017-07-16', '2017-07-17', '2017-07-18', '2017-07-19', '2017-07-20', '2017-07-21', '2017-07-22', '2017-07-23', '2017-07-24', '2017-07-25', '2017-07-26', '2017-07-27', '2017-07-28', '2017-07-29', '2017-07-30', '2017-07-31', '2017-08-01', '2017-08-02', '2017-08-03', '2017-08-04', '2017-08-05', '2017-08-06', '2017-08-07', '2017-08-08', '2017-08-09', '2017-08-10', '2017-08-11', '2017-08-12', '2017-08-13', '2017-08-14', '2017-08-15', '2017-08-16', '2017-08-17', '2017-08-18', '2017-08-19', '2017-08-20', '2017-08-21', '2017-08-22', '2017-08-23', '2017-08-24', '2017-08-25', '2017-08-26', '2017-08-27', '2017-08-28', '2017-08-29', '2017-08-30', '2017-08-31', '2017-09-01', '2017-09-02', '2017-09-03', '2017-09-04', '2017-09-05', '2017-09-06', '2017-09-07', '2017-09-08', '2017-09-09', '2017-09-10', '2017-09-11', '2017-09-12', '2017-09-13', '2017-09-14', '2017-09-15', '2017-09-16', '2017-09-17', '2017-09-18', '2017-09-19', '2017-09-20', '2017-09-21', '2017-09-22', '2017-09-23', '2017-09-24', '2017-09-25', '2017-09-26', '2017-09-27', '2017-09-28', '2017-09-29', '2017-09-30', '2017-10-01', '2017-10-02', '2017-10-03', '2017-10-04', '2017-10-05', '2017-10-06', '2017-10-07', '2017-10-08', '2017-10-09', '2017-10-10', '2017-10-11', '2017-10-12', '2017-10-13', '2017-10-14', '2017-10-15', '2017-10-16', '2017-10-17', '2017-10-18', '2017-10-19', '2017-10-20', '2017-10-21', '2017-10-22', '2017-10-23', '2017-10-24', '2017-10-25', '2017-10-26', '2017-10-27', '2017-10-28', '2017-10-29', '2017-10-30', '2017-10-31'];
  var dolutarihler = ['2017-11-01', '2017-11-02', '2017-11-03', '2017-11-04', '2017-11-05', '2017-11-06', '2017-11-07', '2017-11-08', '2017-11-09', '2017-11-10', '2017-11-11', '2017-11-12', '2017-11-13', '2017-11-14', '2017-11-15', '2017-11-16', '2017-11-17', '2017-11-18', '2017-11-19', '2017-11-20', '2017-11-21', '2017-11-22', '2017-11-23', '2017-11-24', '2017-11-25', '2017-11-26', '2017-11-27', '2017-11-28', '2017-11-29', '2017-11-30', '2017-12-01', '2017-12-02', '2017-12-03', '2017-12-04', '2017-12-05', '2017-12-06', '2017-12-07', '2017-12-08', '2017-12-09', '2017-12-10', '2017-12-11', '2017-12-12', '2017-12-13', '2017-12-14', '2017-12-15', '2017-12-16', '2017-12-17', '2017-12-18', '2017-12-19', '2017-12-20', '2017-12-21', '2017-12-22', '2017-12-23', '2017-12-24', '2017-12-25', '2017-12-26', '2017-12-27', '2017-12-28', '2017-12-29', '2017-12-30', '2017-12-31'];
  var sstarihler = [];

  $(function() {

    $(".otel-ara-submit,.otel-oda-sec").click(function() {

      if ($(this).attr("disabled") != "disabled") {

        if (($('#checkinplaceholder').val()) != "") {

          if (($("#checkin").val() != "") && ($("#checkout").val() != "")) {
            gidis = $("#checkin").val().replace(/\./g, "-");
            donus = $("#checkout").val().replace(/\./g, "-");;
            var d1 = new Date(gidis.split("-")[2] + "-" + gidis.split("-")[1] + "-" + gidis.split("-")[0]);
            var d2 = new Date(donus.split("-")[2] + "-" + donus.split("-")[1] + "-" + donus.split("-")[0]);
            var diff = (d2.getTime() - d1.getTime()) / (24 * 60 * 60 * 1000);

            if (diff > 15) {

              alert("Arama Yapılacak Tarih Aralığı 15 Günden Fazla Olamaz")
              return false;
            }

          }

          $(this).attr("disabled", true);
        } else {

          alert("Lütfen arama yapmak için Şehir/Belde ya da Otel Adı belirleyiniz");
          $(this).attr("disabled", false);
          return false;

        }

      }
    });

    $('#checkin').datepicker({
      numberOfMonths: 2,
      //minDate: new Date(ilktarih),
      minDate: 0,
      maxDate: new Date(sontarih),
      onSelect: function(selectedDate) {

        window.setTimeout($.proxy(function() {
          $("#checkout").focus();
        }, this), 10);
        var yenitarih = new Date();

        var date = $(this).datepicker('getDate');
        date.setTime(date.getTime() + (1000 * 60 * 60 * 24))

        $("#checkout").datepicker("option", "minDate", date);
      },
      beforeShowDay: function(date) {
        if (date >= jQuery('#checkin').datepicker('getDate') && date <= jQuery('#checkout').datepicker('getDate')) {
          return [true, 'ui-selected-highlight'];
        } else {
          return [true, ''];
        }
        var y = date.getFullYear().toString();
        var m = (date.getMonth() + 1).toString();
        var d = date.getDate().toString();
        if (m.length == 1) {
          m = '0' + m;
        }
        if (d.length == 1) {
          d = '0' + d;
        }
        var currDate = y + '-' + m + '-' + d;

        if (jQuery.inArray(currDate, dolutarihler) >= 0) {
          return [false, "ui-highlight"];
        }

        if (jQuery.inArray(currDate, bostarihler) >= 0) {
          return [true, "ui-bos"];
        }

        if (jQuery.inArray(currDate, sstarihler) >= 0) {
          return [false, "ui-ss"];
        } else {
          return [true];
        }

      }
    });

    $('#checkout').datepicker({
      numberOfMonths: 2,
      minDate: new Date(ilktarih),
      maxDate: new Date(sontarih),
      onSelect: function(selectedDate) {
        $(".popover-wrapper").addClass("open");
        $("#checkin").datepicker("option", "maxDate", selectedDate);
      },
      beforeShowDay: function(date) {
        if (date >= jQuery('#checkin').datepicker('getDate') && date <= jQuery('#checkout').datepicker('getDate')) {
          return [true, 'ui-selected-highlight'];
        } else {
          return [true, ''];
        }
        var y = date.getFullYear().toString();
        var m = (date.getMonth() + 1).toString();
        var d = date.getDate().toString();
        if (m.length == 1) {
          m = '0' + m;
        }
        if (d.length == 1) {
          d = '0' + d;
        }
        var currDate = y + '-' + m + '-' + d;

        if (jQuery.inArray(currDate, dolutarihler) >= 0) {
          return [true, "ui-highlight-donus"];
        }

        if (jQuery.inArray(currDate, bostarihler) >= 0) {
          return [true, "ui-bos"];
        }

        if (jQuery.inArray(currDate, sstarihler) >= 0) {
          return [true, "ui-ss-donus"];
        } else {
          return [true];
        }

      }
    });

  })
});

＆＃13;

.ui-helper-hidden {
  display: none;
}

.ui-helper-hidden-accessible {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.ui-helper-reset {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  line-height: 1.3;
  text-decoration: none;
  font-size: 100%;
  list-style: none;
}

.ui-helper-clearfix:before,
.ui-helper-clearfix:after {
  content: "";
  display: table;
  border-collapse: collapse;
}

.ui-helper-clearfix:after {
  clear: both;
}

.ui-helper-clearfix {
  min-height: 0;
  /* support: IE7 */
}

.ui-helper-zfix {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  opacity: 0;
  filter: Alpha(Opacity=0);
}

.ui-front {
  z-index: 100;
}

.ui-widget-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.ui-datepicker {
  width: 17em;
  padding: .2em .2em 0;
  display: none;
}

.ui-datepicker .ui-datepicker-header {
  position: relative;
  padding: .2em 0;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
  position: absolute;
  top: 2px;
  width: 1.8em;
  height: 1.8em;
}

.ui-datepicker .ui-datepicker-prev-hover,
.ui-datepicker .ui-datepicker-next-hover {
  top: 1px;
}

.ui-datepicker .ui-datepicker-prev {
  left: 2px;
}

.ui-datepicker .ui-datepicker-next {
  right: 2px;
}

.ui-datepicker .ui-datepicker-prev-hover {
  left: 1px;
}

.ui-datepicker .ui-datepicker-next-hover {
  right: 1px;
}

.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
  display: block;
  position: absolute;
  left: 50%;
  margin-left: -8px;
  top: 50%;
  margin-top: -8px;
}

.ui-datepicker .ui-datepicker-title {
  margin: 0 2.3em;
  line-height: 1.8em;
  text-align: center;
}

.ui-datepicker .ui-datepicker-title select {
  font-size: 1em;
  color: #999;
  padding-left: 10px;
  text-align: center;
}

.ui-datepicker select.ui-datepicker-month-year {
  width: 100%;
}

.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
  width: 49%;
}

.ui-datepicker table {
  width: 100%;
  font-size: .9em;
  border-collapse: collapse;
  margin: 0 0 .4em;
}

.ui-datepicker th {
  padding: .7em .3em;
  text-align: center;
  font-weight: bold;
  border: 0;
}

.ui-datepicker td {
  border: 0;
  padding: 1px;
}

.ui-datepicker td span,
.ui-datepicker td a {
  display: block;
  padding: .2em;
  /*text-align: right;*/
  text-decoration: none;
}

.ui-datepicker .ui-datepicker-buttonpane {
  background-image: none;
  margin: .7em 0 0 0;
  padding: 0 .2em;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
}

.ui-datepicker .ui-datepicker-buttonpane button {
  float: right;
  margin: .5em .2em .4em;
  cursor: pointer;
  padding: .2em .6em .3em .6em;
  width: auto;
  overflow: visible;
}

.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
  float: left;
}


/* with multiple calendars */

.ui-datepicker.ui-datepicker-multi {
  width: auto;
}

.ui-datepicker-multi .ui-datepicker-group {
  float: left;
}

.ui-datepicker-multi .ui-datepicker-group table {
  width: 100%;
  margin: 0 auto .4em;
}

.ui-datepicker-multi-2 .ui-datepicker-group {
  width: 50%;
}

.ui-datepicker-multi-3 .ui-datepicker-group {
  width: 33.3%;
}

.ui-datepicker-multi-4 .ui-datepicker-group {
  width: 25%;
}

.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header,
.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header {
  border-left-width: 0;
}

.ui-datepicker-multi .ui-datepicker-buttonpane {
  clear: left;
}

.ui-datepicker-row-break {
  clear: both;
  width: 100%;
  font-size: 0;
}

.ui-widget {
  font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif;
  font-size: 1.1em;
}

.ui-widget .ui-widget {
  font-size: 1em;
}

.ui-highlight .ui-state-default {
  text-decoration: line-through !important;
  cursor: not-allowed;
}

.ui-bos .ui-state-default {
  color: #666 !important;
  /*background: #999000 !important;*/
  /*border-color: #999000 !important;*/
  /*color: white !important;*/
  /*
    &:hover{
      color: #FFF;
      background: #007fad;
      border: 1px solid #007fad !important;
  }
  */
}

.ui-datepicker.current-day {
  border: 1px solid #007fad;
}

.ui-datepicker-current-day .ui-state-default:hover {
  border: 1px solid #007fad;
}

.ui-ss .ui-state-default {
  background: yellow !important;
  border-color: yellow !important;
  color: gray !important;
  cursor: help;
  border-radius: 0 !important;
}

.ui-ss-donus .ui-state-default {
  background: #b2b002 !important;
  border-color: #b2b002 !important;
  cursor: help;
  border-radius: 0 !important;
}

.ui-ss-donus .ui-state-default a {
  color: #000;
  border-radius: 0 !important;
}

.ui-highlight-donus {
  background: #d90436 !important;
  border-color: #d90436 !important;
}

.ui-highlight-donus a,
.ui-highlight-donus span {
  color: white !important;
}

.ui-datepicker,
.ui-datepicker table,
.ui-datepicker tr,
.ui-datepicker td,
.ui-datepicker th {
  margin: 0;
  padding: 0;
  border: none;
  border-spacing: 0;
}

.ui-datepicker {
  display: none;
  width: auto !important;
  padding: 20px;
  cursor: default;
  z-index: 1000 !important;
  text-transform: uppercase;
  font-family: Tahoma;
  font-size: 13px;
  /*
  background: #141517;    
  */
  background: #FFF;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.1), inset 0px 0 1px black;
  -moz-box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.1), inset 0px 0 1px black;
  box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.1), inset 0px 0 1px black;
}

.ui-datepicker-header {
  position: relative;
  padding-bottom: 10px;
  border-bottom: 1px solid #d6d6d6;
}

.ui-datepicker-title {
  text-align: center;
}

.ui-datepicker-month {
  position: relative;
  padding-right: 15px;
  color: #565656;
}

.ui-datepicker-month:before {
  display: block;
  position: absolute;
  top: 5px;
  right: 0;
  width: 5px;
  height: 5px;
  content: '';
  background: #a5cd4e;
  background: -moz-linear-gradient(top, #a5cd4e 0%, #6b8f1a 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #a5cd4e), color-stop(100%, #6b8f1a));
  background: -webkit-linear-gradient(top, #a5cd4e 0%, #6b8f1a 100%);
  background: -o-linear-gradient(top, #a5cd4e 0%, #6b8f1a 100%);
  background: -ms-linear-gradient(top, #a5cd4e 0%, #6b8f1a 100%);
  background: linear-gradient(top, #a5cd4e 0%, #6b8f1a 100%);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

.ui-datepicker-year {
  padding-left: 8px;
  color: #a8a8a8;
}

.ui-datepicker-prev,
.ui-datepicker-next {
  position: absolute;
  top: -2px;
  padding: 5px;
  cursor: pointer;
}

.ui-datepicker-prev {
  left: 0;
  padding-left: 0;
}

.ui-datepicker-next {
  right: 0;
  padding-right: 0;
}

.ui-datepicker-prev span,
.ui-datepicker-next span {
  display: block;
  width: 5px;
  height: 10px;
  text-indent: -9999px;
  background-image: url(../img/assets/arrows.png);
}

.ui-datepicker-prev span {
  background-position: 0px 0px;
}

.ui-datepicker-next span {
  background-position: -5px 0px;
}

.ui-datepicker-prev-hover span {
  background-position: 0px -10px;
}

.ui-datepicker-next-hover span {
  background-position: -5px -10px;
}

.ui-datepicker-calendar .ui-state-hover:hover:hover {
  color: #FFF !important;
  background: #007fad;
}

.ui-datepicker-calendar th {
  padding-top: 15px;
  padding-bottom: 10px;
  text-align: center;
  font-weight: normal;
  /* color: #a8a8a8;*/
  color: #37454d;
}

.ui-datepicker-unselectable .ui-state-default {
  cursor: default;
  color: #cdd0d2 !important;
  border: none !important;
}

.ui-datepicker-calendar td {
  padding: 3px 7px;
  text-align: center;
  line-height: 19px;
}

.ui-datepicker-today .ui-state-default {
  border: none !important;
  color: #007fad !important;
  font-weight: 600;
}

.ui-datepicker-calendar .ui-state-default {
  position: relative;
  display: block;
  width: 26px;
  outline: none;
  text-decoration: none;
  /*color: #a8a8a8;*/
  color: #37454d;
  /*border: 1px solid transparent;*/
}

.ui-datepicker-calendar .ui-state-active {
  color: #f48f00 !important;
  border: 1px solid #f48f00;
}

.ui-datepicker-other-month .ui-state-default {
  color: #565656;
}

.ui-selected-highlight .ui-state-default {
  border: 1px solid #333 !important;
}

.ui-selected-highlight .ui-state-default:last-of-type:after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 3px 6px 3px;
  border-color: transparent transparent orange transparent;
  position: absolute;
  bottom: 0;
  text-align: center;
  left: 50%;
}

＆＃13;

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


<div class="form">
  <input type="text" id="checkin" />
  <input type="text" id="checkout" />
  <input type="submit" value="Ara" />
</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>

＆＃13;

＆＃13;

＆＃13;

click to see on codepen

Answer 1

您只需比较beforeShowDay()上的日期即可。例如，我检查并设置这两个类：

.start{
  background: green;
}
.stop{
  background: red;
}

检查代码段：

＆＃13;

＆＃13;

$(function() {
  $.datepicker.setDefaults($.datepicker.regional['tr']);

  var ilktarih = ['2017-04-20'];
  var sontarih = ['2017-12-31']
  var bostarihler = ['2017-04-20', '2017-04-21', '2017-04-22', '2017-04-23', '2017-04-24', '2017-04-25', '2017-04-26', '2017-04-27', '2017-04-28', '2017-04-29', '2017-04-30', '2017-05-01', '2017-05-02', '2017-05-03', '2017-05-04', '2017-05-05', '2017-05-06', '2017-05-07', '2017-05-08', '2017-05-09', '2017-05-10', '2017-05-11', '2017-05-12', '2017-05-13', '2017-05-14', '2017-05-15', '2017-05-16', '2017-05-17', '2017-05-18', '2017-05-19', '2017-05-20', '2017-05-21', '2017-05-22', '2017-05-23', '2017-05-24', '2017-05-25', '2017-05-26', '2017-05-27', '2017-05-28', '2017-05-29', '2017-05-30', '2017-05-31', '2017-06-01', '2017-06-02', '2017-06-03', '2017-06-04', '2017-06-05', '2017-06-06', '2017-06-07', '2017-06-08', '2017-06-09', '2017-06-10', '2017-06-11', '2017-06-12', '2017-06-13', '2017-06-14', '2017-06-15', '2017-06-16', '2017-06-17', '2017-06-18', '2017-06-19', '2017-06-20', '2017-06-21', '2017-06-22', '2017-06-23', '2017-06-24', '2017-06-25', '2017-06-26', '2017-06-27', '2017-06-28', '2017-06-29', '2017-06-30', '2017-07-01', '2017-07-02', '2017-07-03', '2017-07-04', '2017-07-05', '2017-07-06', '2017-07-07', '2017-07-08', '2017-07-09', '2017-07-10', '2017-07-11', '2017-07-12', '2017-07-13', '2017-07-14', '2017-07-15', '2017-07-16', '2017-07-17', '2017-07-18', '2017-07-19', '2017-07-20', '2017-07-21', '2017-07-22', '2017-07-23', '2017-07-24', '2017-07-25', '2017-07-26', '2017-07-27', '2017-07-28', '2017-07-29', '2017-07-30', '2017-07-31', '2017-08-01', '2017-08-02', '2017-08-03', '2017-08-04', '2017-08-05', '2017-08-06', '2017-08-07', '2017-08-08', '2017-08-09', '2017-08-10', '2017-08-11', '2017-08-12', '2017-08-13', '2017-08-14', '2017-08-15', '2017-08-16', '2017-08-17', '2017-08-18', '2017-08-19', '2017-08-20', '2017-08-21', '2017-08-22', '2017-08-23', '2017-08-24', '2017-08-25', '2017-08-26', '2017-08-27', '2017-08-28', '2017-08-29', '2017-08-30', '2017-08-31', '2017-09-01', '2017-09-02', '2017-09-03', '2017-09-04', '2017-09-05', '2017-09-06', '2017-09-07', '2017-09-08', '2017-09-09', '2017-09-10', '2017-09-11', '2017-09-12', '2017-09-13', '2017-09-14', '2017-09-15', '2017-09-16', '2017-09-17', '2017-09-18', '2017-09-19', '2017-09-20', '2017-09-21', '2017-09-22', '2017-09-23', '2017-09-24', '2017-09-25', '2017-09-26', '2017-09-27', '2017-09-28', '2017-09-29', '2017-09-30', '2017-10-01', '2017-10-02', '2017-10-03', '2017-10-04', '2017-10-05', '2017-10-06', '2017-10-07', '2017-10-08', '2017-10-09', '2017-10-10', '2017-10-11', '2017-10-12', '2017-10-13', '2017-10-14', '2017-10-15', '2017-10-16', '2017-10-17', '2017-10-18', '2017-10-19', '2017-10-20', '2017-10-21', '2017-10-22', '2017-10-23', '2017-10-24', '2017-10-25', '2017-10-26', '2017-10-27', '2017-10-28', '2017-10-29', '2017-10-30', '2017-10-31'];
  var dolutarihler = ['2017-11-01', '2017-11-02', '2017-11-03', '2017-11-04', '2017-11-05', '2017-11-06', '2017-11-07', '2017-11-08', '2017-11-09', '2017-11-10', '2017-11-11', '2017-11-12', '2017-11-13', '2017-11-14', '2017-11-15', '2017-11-16', '2017-11-17', '2017-11-18', '2017-11-19', '2017-11-20', '2017-11-21', '2017-11-22', '2017-11-23', '2017-11-24', '2017-11-25', '2017-11-26', '2017-11-27', '2017-11-28', '2017-11-29', '2017-11-30', '2017-12-01', '2017-12-02', '2017-12-03', '2017-12-04', '2017-12-05', '2017-12-06', '2017-12-07', '2017-12-08', '2017-12-09', '2017-12-10', '2017-12-11', '2017-12-12', '2017-12-13', '2017-12-14', '2017-12-15', '2017-12-16', '2017-12-17', '2017-12-18', '2017-12-19', '2017-12-20', '2017-12-21', '2017-12-22', '2017-12-23', '2017-12-24', '2017-12-25', '2017-12-26', '2017-12-27', '2017-12-28', '2017-12-29', '2017-12-30', '2017-12-31'];
  var sstarihler = [];

  $(function() {

    $(".otel-ara-submit,.otel-oda-sec").click(function() {

      if ($(this).attr("disabled") != "disabled") {

        if (($('#checkinplaceholder').val()) != "") {

          if (($("#checkin").val() != "") && ($("#checkout").val() != "")) {
            gidis = $("#checkin").val().replace(/\./g, "-");
            donus = $("#checkout").val().replace(/\./g, "-");;
            var d1 = new Date(gidis.split("-")[2] + "-" + gidis.split("-")[1] + "-" + gidis.split("-")[0]);
            var d2 = new Date(donus.split("-")[2] + "-" + donus.split("-")[1] + "-" + donus.split("-")[0]);
            var diff = (d2.getTime() - d1.getTime()) / (24 * 60 * 60 * 1000);

            if (diff > 15) {

              alert("Arama Yapılacak Tarih Aralığı 15 Günden Fazla Olamaz")
              return false;
            }

          }

          $(this).attr("disabled", true);
        } else {

          alert("Lütfen arama yapmak için Şehir/Belde ya da Otel Adı belirleyiniz");
          $(this).attr("disabled", false);
          return false;

        }

      }
    });

    $('#checkin').datepicker({
      numberOfMonths: 2,
      //minDate: new Date(ilktarih),
      minDate: 0,
      maxDate: new Date(sontarih),
      onSelect: function(selectedDate) {

        window.setTimeout($.proxy(function() {
          $("#checkout").focus();
        }, this), 10);
        var yenitarih = new Date();

        var date = $(this).datepicker('getDate');
        date.setTime(date.getTime() + (1000 * 60 * 60 * 24))

        $("#checkout").datepicker("option", "minDate", date);
      },
      beforeShowDay: function(date) {      
        if (jQuery('#checkout').datepicker('getDate') && (date.getTime() === jQuery('#checkout').datepicker('getDate').getTime())) {
          return [true, 'ui-selected-highlight start'];          
        }
        else if (jQuery('#checkin').datepicker('getDate') && (date.getTime() === jQuery('#checkin').datepicker('getDate').getTime())) {
          return [true, 'ui-selected-highlight stop'];          
        }else if(date >= jQuery('#checkin').datepicker('getDate') && date <= jQuery('#checkout').datepicker('getDate')) {
          return [true, 'ui-selected-highlight'];
        } else {
          return [true, ''];
        }
        var y = date.getFullYear().toString();
        var m = (date.getMonth() + 1).toString();
        var d = date.getDate().toString();
        if (m.length == 1) {
          m = '0' + m;
        }
        if (d.length == 1) {
          d = '0' + d;
        }
        var currDate = y + '-' + m + '-' + d;

        if (jQuery.inArray(currDate, dolutarihler) >= 0) {
          return [false, "ui-highlight"];
        }

        if (jQuery.inArray(currDate, bostarihler) >= 0) {
          return [true, "ui-bos"];
        }

        if (jQuery.inArray(currDate, sstarihler) >= 0) {
          return [false, "ui-ss"];
        } else {
          return [true];
        }

      }
    });

    $('#checkout').datepicker({
      numberOfMonths: 2,
      minDate: new Date(ilktarih),
      maxDate: new Date(sontarih),
      onSelect: function(selectedDate) {
        $(".popover-wrapper").addClass("open");
        $("#checkin").datepicker("option", "maxDate", selectedDate);
      },
      beforeShowDay: function(date) {
        if (jQuery('#checkout').datepicker('getDate') && (date.getTime() === jQuery('#checkout').datepicker('getDate').getTime())) {
          return [true, 'ui-selected-highlight start'];          
        }
        else if (jQuery('#checkin').datepicker('getDate') && (date.getTime() === jQuery('#checkin').datepicker('getDate').getTime())) {
          return [true, 'ui-selected-highlight stop'];          
        }else if(date >= jQuery('#checkin').datepicker('getDate') && date <= jQuery('#checkout').datepicker('getDate')) {
          return [true, 'ui-selected-highlight'];
        } else {
          return [true, ''];
        }
        var y = date.getFullYear().toString();
        var m = (date.getMonth() + 1).toString();
        var d = date.getDate().toString();
        if (m.length == 1) {
          m = '0' + m;
        }
        if (d.length == 1) {
          d = '0' + d;
        }
        var currDate = y + '-' + m + '-' + d;

        if (jQuery.inArray(currDate, dolutarihler) >= 0) {
          return [true, "ui-highlight-donus"];
        }

        if (jQuery.inArray(currDate, bostarihler) >= 0) {
          return [true, "ui-bos"];
        }

        if (jQuery.inArray(currDate, sstarihler) >= 0) {
          return [true, "ui-ss-donus"];
        } else {
          return [true];
        }

      }
    });

  })
});

＆＃13;

.ui-helper-hidden {
  display: none;
}

.ui-helper-hidden-accessible {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.ui-helper-reset {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  line-height: 1.3;
  text-decoration: none;
  font-size: 100%;
  list-style: none;
}

.ui-helper-clearfix:before,
.ui-helper-clearfix:after {
  content: "";
  display: table;
  border-collapse: collapse;
}

.ui-helper-clearfix:after {
  clear: both;
}

.ui-helper-clearfix {
  min-height: 0;
  /* support: IE7 */
}

.ui-helper-zfix {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  opacity: 0;
  filter: Alpha(Opacity=0);
}

.ui-front {
  z-index: 100;
}

.ui-widget-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.ui-datepicker {
  width: 17em;
  padding: .2em .2em 0;
  display: none;
}

.ui-datepicker .ui-datepicker-header {
  position: relative;
  padding: .2em 0;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
  position: absolute;
  top: 2px;
  width: 1.8em;
  height: 1.8em;
}

.ui-datepicker .ui-datepicker-prev-hover,
.ui-datepicker .ui-datepicker-next-hover {
  top: 1px;
}

.ui-datepicker .ui-datepicker-prev {
  left: 2px;
}

.ui-datepicker .ui-datepicker-next {
  right: 2px;
}

.ui-datepicker .ui-datepicker-prev-hover {
  left: 1px;
}

.ui-datepicker .ui-datepicker-next-hover {
  right: 1px;
}

.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
  display: block;
  position: absolute;
  left: 50%;
  margin-left: -8px;
  top: 50%;
  margin-top: -8px;
}

.ui-datepicker .ui-datepicker-title {
  margin: 0 2.3em;
  line-height: 1.8em;
  text-align: center;
}

.ui-datepicker .ui-datepicker-title select {
  font-size: 1em;
  color: #999;
  padding-left: 10px;
  text-align: center;
}

.ui-datepicker select.ui-datepicker-month-year {
  width: 100%;
}

.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
  width: 49%;
}

.ui-datepicker table {
  width: 100%;
  font-size: .9em;
  border-collapse: collapse;
  margin: 0 0 .4em;
}

.ui-datepicker th {
  padding: .7em .3em;
  text-align: center;
  font-weight: bold;
  border: 0;
}

.ui-datepicker td {
  border: 0;
  padding: 1px;
}

.ui-datepicker td span,
.ui-datepicker td a {
  display: block;
  padding: .2em;
  /*text-align: right;*/
  text-decoration: none;
}

.ui-datepicker .ui-datepicker-buttonpane {
  background-image: none;
  margin: .7em 0 0 0;
  padding: 0 .2em;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
}

.ui-datepicker .ui-datepicker-buttonpane button {
  float: right;
  margin: .5em .2em .4em;
  cursor: pointer;
  padding: .2em .6em .3em .6em;
  width: auto;
  overflow: visible;
}

.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
  float: left;
}


/* with multiple calendars */

.ui-datepicker.ui-datepicker-multi {
  width: auto;
}

.ui-datepicker-multi .ui-datepicker-group {
  float: left;
}

.ui-datepicker-multi .ui-datepicker-group table {
  width: 100%;
  margin: 0 auto .4em;
}

.ui-datepicker-multi-2 .ui-datepicker-group {
  width: 50%;
}

.ui-datepicker-multi-3 .ui-datepicker-group {
  width: 33.3%;
}

.ui-datepicker-multi-4 .ui-datepicker-group {
  width: 25%;
}

.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header,
.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header {
  border-left-width: 0;
}

.ui-datepicker-multi .ui-datepicker-buttonpane {
  clear: left;
}

.ui-datepicker-row-break {
  clear: both;
  width: 100%;
  font-size: 0;
}

.ui-widget {
  font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif;
  font-size: 1.1em;
}

.ui-widget .ui-widget {
  font-size: 1em;
}

.ui-highlight .ui-state-default {
  text-decoration: line-through !important;
  cursor: not-allowed;
}

.ui-bos .ui-state-default {
  color: #666 !important;
  /*background: #999000 !important;*/
  /*border-color: #999000 !important;*/
  /*color: white !important;*/
  /*
    &:hover{
      color: #FFF;
      background: #007fad;
      border: 1px solid #007fad !important;
  }
  */
}

.ui-datepicker.current-day {
  border: 1px solid #007fad;
}

.ui-datepicker-current-day .ui-state-default:hover {
  border: 1px solid #007fad;
}

.ui-ss .ui-state-default {
  background: yellow !important;
  border-color: yellow !important;
  color: gray !important;
  cursor: help;
  border-radius: 0 !important;
}

.ui-ss-donus .ui-state-default {
  background: #b2b002 !important;
  border-color: #b2b002 !important;
  cursor: help;
  border-radius: 0 !important;
}

.ui-ss-donus .ui-state-default a {
  color: #000;
  border-radius: 0 !important;
}

.ui-highlight-donus {
  background: #d90436 !important;
  border-color: #d90436 !important;
}

.ui-highlight-donus a,
.ui-highlight-donus span {
  color: white !important;
}

.ui-datepicker,
.ui-datepicker table,
.ui-datepicker tr,
.ui-datepicker td,
.ui-datepicker th {
  margin: 0;
  padding: 0;
  border: none;
  border-spacing: 0;
}

.ui-datepicker {
  display: none;
  width: auto !important;
  padding: 20px;
  cursor: default;
  z-index: 1000 !important;
  text-transform: uppercase;
  font-family: Tahoma;
  font-size: 13px;
  /*
  background: #141517;    
  */
  background: #FFF;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.1), inset 0px 0 1px black;
  -moz-box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.1), inset 0px 0 1px black;
  box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.1), inset 0px 0 1px black;
}

.ui-datepicker-header {
  position: relative;
  padding-bottom: 10px;
  border-bottom: 1px solid #d6d6d6;
}

.ui-datepicker-title {
  text-align: center;
}

.ui-datepicker-month {
  position: relative;
  padding-right: 15px;
  color: #565656;
}

.ui-datepicker-month:before {
  display: block;
  position: absolute;
  top: 5px;
  right: 0;
  width: 5px;
  height: 5px;
  content: '';
  background: #a5cd4e;
  background: -moz-linear-gradient(top, #a5cd4e 0%, #6b8f1a 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #a5cd4e), color-stop(100%, #6b8f1a));
  background: -webkit-linear-gradient(top, #a5cd4e 0%, #6b8f1a 100%);
  background: -o-linear-gradient(top, #a5cd4e 0%, #6b8f1a 100%);
  background: -ms-linear-gradient(top, #a5cd4e 0%, #6b8f1a 100%);
  background: linear-gradient(top, #a5cd4e 0%, #6b8f1a 100%);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

.ui-datepicker-year {
  padding-left: 8px;
  color: #a8a8a8;
}

.ui-datepicker-prev,
.ui-datepicker-next {
  position: absolute;
  top: -2px;
  padding: 5px;
  cursor: pointer;
}

.ui-datepicker-prev {
  left: 0;
  padding-left: 0;
}

.ui-datepicker-next {
  right: 0;
  padding-right: 0;
}

.ui-datepicker-prev span,
.ui-datepicker-next span {
  display: block;
  width: 5px;
  height: 10px;
  text-indent: -9999px;
  background-image: url(../img/assets/arrows.png);
}

.ui-datepicker-prev span {
  background-position: 0px 0px;
}

.ui-datepicker-next span {
  background-position: -5px 0px;
}

.ui-datepicker-prev-hover span {
  background-position: 0px -10px;
}

.ui-datepicker-next-hover span {
  background-position: -5px -10px;
}

.ui-datepicker-calendar .ui-state-hover:hover:hover {
  color: #FFF !important;
  background: #007fad;
}

.ui-datepicker-calendar th {
  padding-top: 15px;
  padding-bottom: 10px;
  text-align: center;
  font-weight: normal;
  /* color: #a8a8a8;*/
  color: #37454d;
}

.ui-datepicker-unselectable .ui-state-default {
  cursor: default;
  color: #cdd0d2 !important;
  border: none !important;
}

.ui-datepicker-calendar td {
  padding: 3px 7px;
  text-align: center;
  line-height: 19px;
}

.ui-datepicker-today .ui-state-default {
  border: none !important;
  color: #007fad !important;
  font-weight: 600;
}

.ui-datepicker-calendar .ui-state-default {
  position: relative;
  display: block;
  width: 26px;
  outline: none;
  text-decoration: none;
  /*color: #a8a8a8;*/
  color: #37454d;
  /*border: 1px solid transparent;*/
}

.ui-datepicker-calendar .ui-state-active {
  color: #f48f00 !important;
  border: 1px solid #f48f00;
}

.ui-datepicker-other-month .ui-state-default {
  color: #565656;
}

.ui-selected-highlight .ui-state-default {
  border: 1px solid #333 !important;
}

.ui-selected-highlight .ui-state-default:last-of-type:after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 3px 6px 3px;
  border-color: transparent transparent orange transparent;
  position: absolute;
  bottom: 0;
  text-align: center;
  left: 50%;
}
.start{
  background: green;
}
.stop{
  background: red;
}

＆＃13;

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


<div class="form">
  <input type="text" id="checkin" />
  <input type="text" id="checkout" />
  <input type="submit" value="Ara" />
</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>

＆＃13;

＆＃13;

＆＃13;