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>

如何在选定日期添加课程？

1 个答案: