在jQuery UI日历上突出显示带有日期的计数

Highlight count with date on jQuery UI calendar

本文关键字：日期 显示 UI jQuery 日历      更新时间：2023-09-26

我正在尝试为我的事件部分实现jquery uy日历，毫无疑问，它工作正常，但是我在该日历中有一个自定义要求，我想突出显示没有事件，例如，1月21日有2个事件，1月25日有3个事件，然后它将显示带有计数的日期的位突出显示。

可以使用jquery uy吗

$(document).ready(function(){
$('#event').datepicker();
});
您可以使用

beforeShowDay ，一个 jQuery UI 日期选择器小部件选项。

一个

函数，它将日期作为参数，并且必须返回一个数组，其中包含：

  • [0]: true/false指示此日期是否可选
  • [1]：要添加到日期单元格或默认演示文稿""的 CSS 类名
  • [2]：此日期的可选弹出窗口tooltip

在显示日期选取器中为 EACH DAY 调用该函数。

对于您的问题：工作解决方案。

var highlightdates = ["2016-1-21", "2016-1-25"];
$("#datepicker1").datepicker({
  dateFormat: 'yy-mm-dd',
  beforeShowDay: function(date) {
    var m = date.getMonth(),
      d = date.getDate(),
      y = date.getFullYear();
    if ($.inArray(y + '-' + (m + 1) + '-' + d, highlightdates) != -1) {
      return [true, 'css-class-to-highlight', 'Get the count on Tooltip'];
    }
    return [true];
  }
});
.css-class-to-highlight a {
  background-color: green !important;
  background-image: none !important;
  color: White !important;
  font-weight: bold !important;
  font-size: 12pt;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<p>Date:
  <input id="datepicker1" type="text">
</p>

小提琴

参考：文档

相关文章：