【问题标题】:jQuery UI datepicker highlighting datesjQuery UI datepicker 突出显示日期
【发布时间】:2015-06-26 13:26:50
【问题描述】:

我尝试使用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>

【问题讨论】:

  • 向我们展示您的代码,否则我们无能为力
  • 用代码示例更新了我的问题

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


【解决方案1】:

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

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

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

这就是为什么您应该始终使用字符串作为键。此外,如您所见,您在地图数组中调用了两次相同的日期,这使您的密钥在这种情况下无用,因为密钥 === 值。

因此,也许您想将字符串数组与 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/

【讨论】:

    【解决方案2】:

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

    【讨论】:

    • 有一个奇怪的行为,eventDates[date]应该指向12/04/2014,事实并非如此,它使用了key。
    • 那是我的错,但是在这种情况下,关键是最重要的。该值可以是 true 或 1,并且代码的工作方式相同。
    猜你喜欢
    • 2013-01-17
    • 1970-01-01
    • 2012-12-11
    • 2013-06-24
    • 2012-04-27
    • 1970-01-01
    • 2011-02-08
    • 1970-01-01
    • 2016-12-07
    相关资源
    最近更新 更多