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

Question

我正在尝试为我的活动部分实施jquery ui日历，这无疑是正常工作但我在该日历中有一个自定义要求我想要突出显示的事件，特别是那些＆例如那里＆ ＃39;在2月21日和2月25日的2个事件，然后它将显示那些有计数的日期点亮。

是否可以使用jquery ui

$(document).ready(function(){
$('#event').datepicker();
});

Answer 1

您可以使用beforeShowDay，一个jQuery UI Datepicker Widget选项。

一个以日期作为参数的函数，必须返回一个数组：

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

在显示之前，该功能在日期选择器中为每天的调用。

<小时/> 对于您的问题：工作解决方案。

＆＃13;

＆＃13;

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];
  }
});

＆＃13;

.css-class-to-highlight a {
  background-color: green !important;
  background-image: none !important;
  color: White !important;
  font-weight: bold !important;
  font-size: 12pt;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Fiddle

参考：Documentation