Question

我也使用jQuery日期选择器作为在线日历。我有一个设置，它采用data-value div的.whats-on-block属性中的日期值，并将.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: '&rarr;',
        //prevText: '&larr;',
        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上提供实时演示。

jQuery datepicker：突出显示并设置多个日期样式

1 个答案: