jQuery UI datepicker突出显示日期

时间:2015-06-26 13:26:51

标签: jquery jquery-ui jquery-ui-datepicker

我尝试使用此example突出显示日期,遗憾的是我使用了不同版本的jQuery和jQuery UI,但这不起作用。未显示突出显示天数的月份。我该如何解决?

jQuery - v2.1.3

jQuery UI - v1.11.4

我的代码如下所示:

<div id="calendar"></div>

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

        // An array of dates
        var eventDates = {};
        eventDates[ new Date( '07/07/2015' )] = new Date( '07/07/2015' );

        // datepicker
        jQuery('#calendar').datepicker({
            beforeShowDay: function( date ) {
                var highlight = eventDates[date];
                if( highlight ) {
                    return [true, "event", highlight];
                } else {
                    return [true, '', ''];
                }
            }
        });
    });
</script>

2 个答案:

答案 0 :(得分:0)

这是一个很好的问题。我将jquery版本更改为1.8.3,将jquery ui更改为1.9.2,然后它就可以了。这是一个example

答案 1 :(得分:0)

这部分代码可能导致一种奇怪的行为:

var eventDates = {};
eventDates[ new Date( '07/07/2015' )] = new Date( '07/07/2015' );

在这种情况下,date将使用他的toString()方法返回要使用的键,但是某些对象只能返回[object Object]。

这就是为什么你应该使用always string作为密钥。此外,正如您所看到的,您在地图数组中调用了两次相同的日期,这使得您的密钥在这种情况下无用,因为密钥=== value。

因此,您可能希望使用带有toISOString的字符串数组:

var eventDates = [];
eventDates.push((new Date( '06/06/2015' )).toISOString(),
                (new Date( '06/07/2015' )).toISOString()
               );

然后您可以使用indexOf检查日期是否在您的数组中:

return (eventDates.indexOf(date.toISOString()) > -1) ? [true, "event"] : [true, ""];

这是jsfiddle(感谢模板的depperm):

http://jsfiddle.net/ozud01wm/1/