在jquery UI datepicker中突出显示日期

Question

我如何使用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, '', ''];
      }
   }
});

现在您可以添加样式以突出显示日期

<style>
   .css-class-to-highlight{
       background-color: #ff0;
   }
</style>

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

        }
    });
});