Question

如何在所选日期的每个日期添加课程。

让我们说我点击星期四，星期四下的所有日期都有上课。

我提供服务，您可以选择频率，每周，2周，4周，并且当用户单击某个日期添加选择频率时，日历上的日期会突出显示。

我尝试从ui-state-default向每个第n个孩子添加css，但这不起作用。

```
    $('#cookdate').datepicker({
            numberOfMonths: 2,
            altField: '#selectedDatecook',
            minDate: 2,
            maxPicks: 20,
            onSelect: function (date) {
            var date = $(this).datepicker('getDate');
            var day = date.getUTCDay();

            },
    });

Answer 1

您将要结合使用onSelect和beforeShowDate。例如：

$(function() {
  var selected, final;
  var days = 7;
  $('#cookdate').datepicker({
    numberOfMonths: 2,
    minDate: 2,
    onSelect: function(dStr, obj) {
      selected = $.datepicker.parseDate("mm/dd/yy", dStr);
      final = new Date(selected);
      final.setDate(selected.getDate() + days);
      $("#selectdate").val($.datepicker.formatDate("mm/dd/yy", final));
    },
    beforeShowDay: function(dt) {
      $(".highlighted").removeClass("highlighted");
      if (dt > selected && dt <= final) {
        return [true, "highlighted"];
      } else {
        return [true, ""];
      }
    }
  });
});

td.highlighted, td.highlighted a.ui-state-default {
  background-color: #ccc;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<p>Cook Date: <input type="text" id="cookdate"> Select Date: <input type="text" id="selectdate"></p>

您可以将days更改为任意天数。 beforeShowDays然后将查找匹配的日期，并向它们添加一个类，highlighted。

当我选择日期时，将课程添加到第n个元素

1 个答案: