在jquery UI datepicker中突出显示日期

我如何使用beforeShowDay突出显示jQuery UI datepicker中的日子。 我有以下日期数组

Array ( [0] => 2011-07-07 [1] => 2011-07-08 [2] => 2011-07-09 [3] => 2011-07-10 [4] => 2011-07-11 [5] => 2011-07-12 [6] => 2011-07-13 ) 

Answer 1

看看文档。

beforeShowDay该函数将日期作为参数，并且必须返回一个数组，其中[0]等于true / false，指示此日期是否可选，[1]等于CSS类名称或”作为默认值演示文稿，以及[2]此日期的可选弹出工具提示。 在显示日期选择器之前，它会在每天被调用。

这意味着您需要创建一个函数来获取日期并返回一个参数数组，其中值为：

1. boolean – 表示是否可以选择日期
2. string – 将应用于日期的css类的名称
3. string – 此日期的可选弹出工具提示

这是一个例子：

 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 2

我用这个问题解决了

 var disabledDays = ["2011-7-21","2011-7-24","2011-7-27","2011-7-28"]; var date = new Date(); jQuery(document).ready(function() { $( "#dateselector").datepicker({ dateFormat: 'yy-mm-dd', beforeShowDay: function(date) { var m = date.getMonth(), d = date.getDate(), y = date.getFullYear(); for (i = 0; i < disabledDays.length; i++) { if($.inArray(y + '-' + (m+1) + '-' + d,disabledDays) != -1) { //return [false]; return [true, 'ui-state-active', '']; } } return [true]; } }); }); 

Answer 3

发现投票最多的答案不起作用。 稍微更新了代码以使其正常工作。 $ .inArray（）主要搜索indexOf（）。 我们也不能直接比较两个日期的平等。 参考： 使用JavaScript比较两个日期

 function inArrayDates(needle, haystack){ var found = 0; for (var i=0, len=haystack.length;i 

并将接受的function更新为

 if(inArrayDates(date, markDates) != -1) { return [true, 'selected-highlight', 'tooltip here']; } else { return [true, '', '']; } 

Answer 4

JS中的Date是对象Date实例，因此使用==或===无法正确检查日期是否相等。

简单解决方案

 var your_dates = [ new Date(2017, 4, 25), new Date(2017, 4, 23) ]; $( "#some_selector" ).datepicker({ beforeShowDay: function(date) { are_dates_equal = d => d.getTime() === date.getTime(); if(your_dates.some(are_dates_equal)) { return [true, 'ui-state-active', '']; } return [true, '', '']; } }) 

Answer 5

http://jqueryui.com/demos/datepicker/#event-beforeShowDay

您将beforeShowDay中的date参数与数组中的日期进行比较，如果匹配，则返回上面链接中定义的数组。

在您从beforeShowDay返回的数组中，第二个元素用于设置将在日期使用的类名，然后您可以使用css为该类设置样式。