使用jQuery的datepicker突出显示特定范围内的日期

Question

我需要突出显示开始日期和结束日期之间的日期,我应该能够指定.谁能帮我？

Answer 1

您可以使用beforeShowDay事件.每个需要在日历中显示的日期都会调用它.它传递一个日期并返回一个数组,其中[0] = isSelectable,1 = cssClass,[2] =一些工具提示文本

$('#whatever').datepicker({
            beforeShowDay: function(date) {
             if (date == myDate) {
              return [true, 'css-class-to-highlight', 'tooltipText'];

              }
           }
});

Answer 2

这是一个有效的例子!你将需要通过http://jqueryui.com/download与核心,小部件和日期选择器一起制作一个软件包.

之前的javascript部分:

<script>
$(document).ready(function() {

    var dates = ['22/01/2012', '23/01/2012']; //
            //tips are optional but good to have
    var tips  = ['some description','some other description'];      

    $('#datepicker').datepicker({                
        dateFormat: 'dd/mm/yy',
        beforeShowDay: highlightDays,
        showOtherMonths: true,
        numberOfMonths: 3,
    });

    function highlightDays(date) {
        for (var i = 0; i < dates.length; i++) {
            if (new Date(dates[i]).toString() == date.toString()) {              
                return [true, 'highlight', tips[i]];
            }
        }
        return [true, ''];
     } 

});
</script>

HTML部分:

<div id="datepicker"></div>

添加这个CSS的地方:

    td.highlight {border: none !important;padding: 1px 0 1px 1px !important;background: none !important;overflow:hidden;}
td.highlight a {background: #99dd73 url(bg.png) 50% 50% repeat-x !important;  border: 1px #88a276 solid !important;}

你需要制作一个名为bg.png的小图像才能使它工作

Answer 3

以为我会投入两美分,因为它似乎比其他人更快,更轻盈:

jQuery(function($) {
  var dates = {
    '2012/6/4': 'some description',
    '2012/6/6': 'some other description'
  };

  $('#datepicker').datepicker({
    beforeShowDay: function(date) {
      var search = date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate();

      if (search in dates) {
        return [true, 'highlight', (dates[search] || '')];
      }

      return [false, '', ''];
    }
  });
});