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

时间:2019-09-27 05:53:19

标签: jquery-ui jquery-ui-datepicker

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

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

我提供服务,您可以选择频率,每周,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();

            },
    });

1 个答案:

答案 0 :(得分:0)

您将要结合使用onSelectbeforeShowDate。例如:

$(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