如何为选定的日子添加课程？

Question

我有使用 jquery ui 日期范围创建的预订表格，我想在第一天和最后一天添加课程。

例如，我想为我的第一天添加first-day-selected 课程，我想为我的最后一天添加last-day-selected 课程。

如果可能的话，我想在这几天之间再开一堂课，或者我想给一个不透明的课程，但这不是必需的

我搜索了一些东西，但我无法申请我的日期选择器。

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

您可以使用beforeShowDay 将课程添加到特定日期。以下仅在您第二次打开它并选择了两个日期后才将类添加到 $("#checkout") 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,
    });
  $("#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>