Question

我有以下 Jquery ui datepicker 设置。我想突出显示未来的特定日期，该怎么做？

我已经禁用了周末，因此使用 beforeShowDay 会增加额外的复杂性。

    $('#mypicker').datepicker({
        //options
        minDate: now,
        firstDay: 0,
        format: "yyyy.mm.dd",
        onSelect: function(dateText, inst) {
            $('.new_ship_date').val(dateText);
        },
        beforeShowDay: $.datepicker.noWeekends,

    });

这是另一个问题的答案，但我不知道如何将其与禁用周末功能结合起来。

var your_dates = [new Date(2011, 7, 7),new Date(2011, 7, 8)]; // just some dates.

$('#whatever').datepicker({
   beforeShowDay: function(date) {
      // check if date is in your array of dates
      if($.inArray(date, your_dates)) {
         // if it is return the following.
         return [true, 'css-class-to-highlight', 'tooltip text'];
      } else {
         // default
         return [true, '', ''];
      }
   }
});

Answer 1

要将 $.datepicker.noWeekends 函数结合到您的逻辑中以根据数组中的日期突出显示单元格，您可以单独调用 noWeekends() 函数以确定日期是否为周末。然后，您可以在检查中使用该值来查看日期是否与数组中的日期匹配，并在数组的第一个元素中返回周末标志。

试试这个：

let now = new Date();

// just for testing:
let addDays = (date, days) => {
  let newDate = new Date(date);
  newDate.setDate(date.getDate() + days);
  return new Date(newDate.toDateString());
}

// map() is used here to store dates as epochs to make comparison easier later on
var highlightDates = [addDays(now, 1), addDays(now, 2), addDays(now, 3)].map(Number); 

$('#mypicker').datepicker({
  minDate: now,
  firstDay: 0,
  format: "yyyy.mm.dd",
  onSelect: function(dateText, inst) {
    $('.new_ship_date').val(dateText);
  },
  beforeShowDay: function(date) {
    let isWeekday = $.datepicker.noWeekends(date)[0];
    if (highlightDates.indexOf(+date) != -1) {
      return [isWeekday, 'highlight', 'tooltip text'];
    } else {
      return [isWeekday, '', ''];
    }
  }
});

.highlight a.ui-state-default {
  background-color: #C00;
  color: #FFF;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />

<input type="text" id="mypicker" />

使用 Jquery UI 日期选择器突出显示特定日期

1 个答案: