如何在jQuery UI Datepicker上设置一个不同的类来表示过去的日期?



是否有一种方法来设置以前的选择的日期的jQuery UI Datepicker不同的类?

我正在处理的场景是,有一个日历,其中包含即将发生的事件和以前的事件。即将到来的事件现在会有一个类应用于它们,并相应地进行样式化。我需要对之前有事件的日期做同样的处理。

例如:

5月10日将是金色的(高亮类),因为这是一个即将到来的事件。

May 8th将被标记为浅灰色(passed-event类),因为它是先前的事件。

这是到目前为止我所得到的(从beforeShowDay开始):

beforeShowDay: function(date) {
                    var result = [true, '', null],
                        afterOrToday = $.grep(events, function(event) {
                            var eventDate = new Date(event.Date),
                                todaysDate = new Date();
                            return date.valueOf() === eventDate.valueOf();
                        }),
                        beforeToday = $.grep(events, function(event) {
                            var eventDate = new Date(event.Date),
                                todaysDate = new Date();
                            return date.valueOf() < eventDate.valueOf();
                        });
                    if (afterOrToday.length)
                        result = [true, 'highlight', null];
                    else if (beforeToday.length)
                        result = [true, 'passed-event', null];
                    return result;
                }

参见此示例http://jsbin.com/imiyez/1/edit:

可以不使用valueOf:

比较日期
[true, ('past' if date < yesterday )]

我不确定这是否是最有效的方法,我很乐意听取有关改进质量的建议,但以下是我想到的解决方案。

beforeShowDay: function(date) {
    var result = [true, '', null],
        today = $.grep(events, function(event) {
            var eventDate = new Date(event.Date);
            return date.valueOf() === eventDate.valueOf();
        }),
        beforeToday = $.grep(events, function(event, i) {
            var eventDate = new Date(event.Date),
                isPast = false;
            if (date.valueOf() === eventDate.valueOf())
                if (date.valueOf() < new Date().valueOf())
                    isPast = true;
            return isPast;
        });
    if (today.length)
        result = [true, 'highlight', null];
    if (beforeToday.length)
        result = [true, 'past-event', null];
    return result;
}

这将在我的过去日期中添加一个类,该类在两个单独的类中有事件和未来日期。谢谢大家的帮助!

最新更新