jQuery日期选择器：以不同的方式设置某些日期的样式

我正在使用jQuery日期选择器和同位素插件过滤器特性相结合来过滤依赖于日期的div。

.blocks

div都有通过

数据值分配的日期，允许您过滤div。e、 g.
.blocks
的第一个实例有3个日期
1782013 1882013 1982013
。我希望分别设置这些日期的样式，即
数据值
属性中的每个日期实例，我希望在
#datepicker
中分配一个单独的类，以便对它们进行不同的样式设置

JSFIDLE演示：

HTML:


17/08 — 19/08
21/08 — 23/08
25/08 — 29/08    

jQuery：

var $container = $('#block-wrap');
var $blocks = $("div.blocks", "#block-wrap");

$(function () {
    $('#datepicker').datepicker({
        inline: true,
        //nextText: '→',
        //prevText: '←',
        showOtherMonths: true,
        //dateFormat: 'dd MM yy',
        dayNamesMin: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
        //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 + '"]'
            });
        }
    });
});

$container.imagesLoaded(function () {
    $container.isotope({
        itemSelector: '.blocks',
        animationEngine: 'css',
        masonry: {
            columnWidth: 5
        }
    });
});

var prepareData = function (howLong) {
    var mode = howLong,
        date = new Date(),
        days = 0,
        d = date.getDate(),
        m = date.getMonth(),
        y = date.getFullYear(),
        duration = [],
        durationReady = [];

    if (mode === "week") {
        days = 7;
    } else if (mode === "month") {
        days = 30;
    }

    for (i = 0; i < days; i++) {
        // for each day create date objects in an array
        duration[i] = new Date(y, m, d + i);

        // convert objects into strings
        // fe. 25th of May becomes '2552013'
        durationReady[i] = duration[i].getDate().toString() + (duration[i].getMonth() + 1).toString() + duration[i].getFullYear().toString();

        // 1. select all items which contain given date
        var $applyMarkers = $('.blocks[data-value~="' + durationReady[i] + '"]')
            .each(function (index, element) {
            var thisElem = $(element),
                thisElemAttr = thisElem.attr('data-value');
            // 2. for each item which does not contain a marker yet, apply one    
            if (thisElemAttr.indexOf(mode.substring(0, 1)) === -1) {
                thisElem.attr('data-value', (thisElemAttr += ' ' + mode));
            }
        });
    }
};

prepareData("week");
prepareData("month");

$("#today").on("click", function () {
    var date = new Date();
    var dateValue = date.getDate().toString() + (date.getMonth() + 1).toString() + date.getFullYear().toString();

    $('#datepicker').datepicker('setDate', date);

    $container.isotope({
        filter: '[data-value~="' + dateValue + '"]'
    });
});


$("#week").on("click", function () {
    $container.isotope({
        filter: '[data-value ~="week"]'
    });
});

$("#month").on("click", function () {
    $container.isotope({
        filter: '[data-value ~="month"]'
    });
});

var$container=$（“#块换行”）；
var$blocks=$（“div.blocks”，“#block wrap”）；
$（函数（）{
$（“#日期选择器”）。日期选择器({
是的，
//下一个文本：“&rarr；”，
//prevText:“&larr；”，
showOtherMonths：是的，
//日期格式：“dd-MM-yy”，
dayNamesMin:[S'，M'，T'，W'，T'，F'，S']，
//展示：“按钮”，
//buttonImage:“img/calendar blue.png”，
//buttonImageOnly:正确，
onSelect：函数（日期文本，inst）{
变量日期=新日期（日期文本）；
var dateValue=date.getDate（）.toString（）+（date.getMonth（）+1.toString（）+date.getFullYear（）.toString（）；
$container.com({
筛选器：'[data value~=“'+dateValue+''']”
});
}
});
});
$container.imagesLoaded（函数（）{
$container.com({
itemSelector:“.blocks”，
动画引擎：“css”，
砌体：{
列宽：5
}
});
});
var prepareData=函数（howLong）{
var模式=长时间，
日期=新日期（），
天数=0，
d=日期。getDate（），
m=date.getMonth（），
y=日期。getFullYear（），
持续时间=[]，
durationReady=[]；
如果（模式==“周”）{
天数=7天；
}否则如果（模式==“月”）{
天数=30天；
}
对于（i=0；i

因此，是否可以收集存储在
数据值
属性中的所有日期，将其存储为变量，并通过
beforeshowday
函数将其传递以分别设置样式？如果可能的话？如有任何建议，将不胜感激
 您可以查看该选项

演示：

注意：正如我在评论中所说，我对
数据值
格式做了一点更改，日期格式更改为
ddmmyyyy
如果是
2013年8月17日
您的日期格式有问题，那么
1782013
代表什么。。。请将其设置为
17082013
，否则您将遇到问题，因为您的表述可能会变成
112013
为您的答案干杯，效果很好，非常感谢！不过，有一个小问题，更改日期格式确实会破坏过滤功能，即，当日期格式现在已更改时，单击
17/08/2013
块过滤掉所有内容。有没有办法让这两个功能同时工作？
var $container = $('#block-wrap');
var $blocks = $("div.blocks", "#block-wrap");

$(function () {
    $('#datepicker').datepicker({
        inline: true,
        //nextText: '&rarr;',
        //prevText: '&larr;',
        showOtherMonths: true,
        //dateFormat: 'dd MM yy',
        dayNamesMin: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
        //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 + '"]'
            });
        }
    });
});

$container.imagesLoaded(function () {
    $container.isotope({
        itemSelector: '.blocks',
        animationEngine: 'css',
        masonry: {
            columnWidth: 5
        }
    });
});

var prepareData = function (howLong) {
    var mode = howLong,
        date = new Date(),
        days = 0,
        d = date.getDate(),
        m = date.getMonth(),
        y = date.getFullYear(),
        duration = [],
        durationReady = [];

    if (mode === "week") {
        days = 7;
    } else if (mode === "month") {
        days = 30;
    }

    for (i = 0; i < days; i++) {
        // for each day create date objects in an array
        duration[i] = new Date(y, m, d + i);

        // convert objects into strings
        // fe. 25th of May becomes '2552013'
        durationReady[i] = duration[i].getDate().toString() + (duration[i].getMonth() + 1).toString() + duration[i].getFullYear().toString();

        // 1. select all items which contain given date
        var $applyMarkers = $('.blocks[data-value~="' + durationReady[i] + '"]')
            .each(function (index, element) {
            var thisElem = $(element),
                thisElemAttr = thisElem.attr('data-value');
            // 2. for each item which does not contain a marker yet, apply one    
            if (thisElemAttr.indexOf(mode.substring(0, 1)) === -1) {
                thisElem.attr('data-value', (thisElemAttr += ' ' + mode));
            }
        });
    }
};

prepareData("week");
prepareData("month");

$("#today").on("click", function () {
    var date = new Date();
    var dateValue = date.getDate().toString() + (date.getMonth() + 1).toString() + date.getFullYear().toString();

    $('#datepicker').datepicker('setDate', date);

    $container.isotope({
        filter: '[data-value~="' + dateValue + '"]'
    });
});


$("#week").on("click", function () {
    $container.isotope({
        filter: '[data-value ~="week"]'
    });
});

$("#month").on("click", function () {
    $container.isotope({
        filter: '[data-value ~="month"]'
    });
});

$(function () {
    var blocks = $('#block-wrap .blocks')
    $('#datepicker').datepicker({
        inline: true,
        //nextText: '&rarr;',
        //prevText: '&larr;',
        showOtherMonths: true,
        //dateFormat: 'dd MM yy',
        dayNamesMin: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
        //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 + '"]'
            });
        },
        beforeShowDay: function(date){
            var target = $.datepicker.formatDate( 'ddmmyy', date);
            var contains = blocks.filter('[data-value*="' + target + '"]').length > 0;
            return [true, contains ? 'special' : '', '']
        }
    });
});