Question

我有日期选择器，我需要选择表中的第二和第四元素。

当前，我已将类添加到每周以及数据属性天，以了解用户单击星期几和一天，因为我有2个日历月，并且需要将类添加到第二个月。

大问题：如何在第二周和第四周添加课程，但是从用户在日历中选择日期的那一天起，要记住要显示2个日历月，需要将课程添加到第二周？

$("#datepicker").datepicker({
  numberOfMonths: 2,
  minDate: 2,
  dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
  beforeShowDay: function(date) {
    setTimeout(function() {
      $(".ui-datepicker-inline").find(".ui-datepicker-calendar tbody tr:first-child").addClass("firstweek");
      $(".ui-datepicker-inline").find(".ui-datepicker-calendar tbody tr:first-child").attr('data-days', 1);
      $(".ui-datepicker-inline").find(".ui-datepicker-calendar tbody tr:nth-child(2)").addClass("secondweek");
      $(".ui-datepicker-inline").find(".ui-datepicker-calendar tbody tr:nth-child(2)").attr('data-days', 2);
      $(".ui-datepicker-inline").find(".ui-datepicker-calendar tbody tr:nth-child(3)").addClass("thirdweek");
      $(".ui-datepicker-inline").find(".ui-datepicker-calendar tbody tr:nth-child(3)").attr('data-days', 3);
      $(".ui-datepicker-inline").find(".ui-datepicker-calendar tbody tr:nth-child(4)").addClass("fourthweek");
      $(".ui-datepicker-inline").find(".ui-datepicker-calendar tbody tr:nth-child(4)").attr('data-days', 4);
      $(".ui-datepicker-inline").find(".ui-datepicker-calendar tbody tr:nth-child(5)").addClass("fifthweek");
      $(".ui-datepicker-inline").find(".ui-datepicker-calendar tbody tr:nth-child(5)").attr('data-days', 5);
    }, 10);
    var show = true;
    if (date.getDay() == 0) show = false
    return [show];
  },
  onSelect: function() {
    var date = $(this).datepicker('getDate');
    var day = date.getUTCDay();
    if (day == '0') {
      setTimeout(function() {
        let current_selected_date = $(".ui-datepicker-calendar").find(".ui-state-active");
        let this_termin_id = $(current_selected_date).parent().parent().data("days")

        $(current_selected_date).parent().parent().parent().find('[data-days="' + this_termin_id + '"]').next().next().addClass('itsmonday');

        $(current_selected_date).parent().parent().parent().find('[data-days="' + this_termin_id + '"]').next().next().next().next().addClass('itsmonday');

      }, 20);
    }
  },

});

.itsmonday td:nth-child(1) a {
  background: #ffe286;
  font-weight: bold;
  color: #fff!important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.2/jquery.ui.datepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.min.css">

<div id="datepicker">

</div>

在不知道父元素的情况下，向第二个元素添加类

0 个答案: