时间戳

首页 > 解决方案 > 当我选择日期时，将类添加到每个第 n 个元素

jquery-ui - 当我选择日期时，将类添加到每个第 n 个元素

问题描述

我如何在选定的日期下为每个日期添加课程。

假设我点击星期四，星期四下的所有日期都有一些课程。

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

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

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

            },
    });

标签： jquery-uijquery-ui-datepicker

解决方案

您将需要使用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.

推荐阅读