Добавить класс для каждого n-го элемента, когда я выбираю дату - PullRequest
Новая
       25

Добавить класс для каждого n-го элемента, когда я выбираю дату

0 голосов
/ 27 сентября 2019

Как я могу добавить класс к каждой дате в выбранный день.

Допустим, я нажимаю на четверг, и у всех дат в четверг есть какой-то класс.

У меня есть служба, где вы можете выбрать частоту, еженедельно, 2 недели, 4 недели, и когда пользователь нажимает на какую-либо дату, добавьте выбранную частоту, даты будут выделены в календаре.

Я пытаюсь добавить CSS для каждого n-го ребенка из ui-state-default, ноэто не работает. 

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

            },
    });

1 Ответ

0 голосов
/ 29 сентября 2019

Вы захотите использовать комбинацию 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.

...