javascript - jQuery 日期选择器 : highlight and style multiple dates

Question

我也在使用 jQuery 日期选择器作为在线日历。我有一个设置，它采用 .whats-on-block div 的 data-value 属性中的日期值，并分配 .special 类到 jQuery 日期选择器中的相关日期值，因此我可以通过 CSS 相应地设置它的样式。
这很好用，我还有一个 .highlights div，它有多个日期值作为 data-highlight 属性，我想知道我是否可以分配 .highlighter 类到日期选择器中的相关日期值，以便我可以分别设置它们的样式？我不太确定如何实现这一点，因为 beforeShowDay 函数已用于分配 .special。这是标记...

HTML

<div class="whats-on-grid">
    <div class="datepicker-block" class="whats-on-block">
        <div id="datepicker"></div>
    </div>
    <div class="whats-on-block" data-value="1982014"></div>
    <div class="whats-on-block" data-value="2282014"></div>
    <div class="whats-on-block" data-value="1482014"></div>
    <div class="whats-on-block" data-value="2982014"></div>
    //etc
</div>


<div class="highlights" data-highlight="2882014 2782014 1582014 2082014 1992014"></div>

CSS

.special { background-color: red !important; }
.highlighter { background-color: blue !important; }

jQuery

var $container = $('.whats-on-grid');
var $blocks = $("div.whats-on-block", ".whats-on-grid");

$(function () {
    var blocks = $('.whats-on-grid .whats-on-block')
    $('#datepicker').datepicker({
        inline: true,
        //nextText: '→',
        //prevText: '←',
        showOtherMonths: true,
        //dateFormat: 'dd MM yy',
        dayNamesMin: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
        //showOn: "button",
        //buttonImage: "img/calendar-blue.png",
        //buttonImageOnly: true,
        onSelect: function (dateText, inst) {
            var date = new Date(dateText);
            var dateValue = date.getDate().toString() + (date.getMonth() + 1).toString() + date.getFullYear().toString();

            $container.isotope({
                filter: '[data-value~="' + dateValue + '"], #datepicker-block'
            });
        },
        beforeShowDay: function (date) {
            var target = date.getDate().toString() + (date.getMonth() + 1).toString() + date.getFullYear().toString();
            var contains = blocks.filter('[data-value~="' + target + '"]').length > 0;
            return [true, contains ? 'special' : '', '']
        }
    });
});

如有任何关于如何实现这一点的建议，我们将不胜感激!

Answer 1

如果您要做的只是在渲染之前将 highlighter 类添加到 highlights 日期，您应该能够在您的 beforeShowDay 函数如下:

beforeShowDay: function (date) {
    var target = date.getDate().toString() + (date.getMonth() + 1).toString() + date.getFullYear().toString();
    var isSpecial = blocks.filter('[data-value~="' + target + '"]').length > 0;
    var isHighlight = $("div[class~='highlights']").filter('[data-highlight~="' + target + '"]').length > 0;
    if (isSpecial) 
        return [true, 'special', ''];
    else if (isHighlight)
        return [true, 'highlighter', ''];
    return [true, '', ''];
    }

棘手的部分是如果一个特殊日期也是一个亮点日期怎么办。您可能需要不同的 CSS 样式来区分它们。

fiddle 提供现场演示.