0

日付に依存する div を除外するために、同位体プラグイン フィルター機能と組み合わせた jQuery 日付ピッカーを使用しています。.blocksdiv にはそれぞれ日付が割り当てられており、data-valuediv をフィルターで除外できます。たとえば、 の最初のインスタンスに.blocksは 3 つの日付があります1782013 1882013 1982013。これらの日付を個別にスタイル設定したいと考えています。つまり、data-value属性内の日付のすべてのインスタンスに個別のクラスを割り当てて、#datepicker異なるスタイルを設定できるようにしたいと考えています。
jsfiddle デモ: http://jsfiddle.net/neal_fletcher/9WnYY/
HTML:

<div id="datepicker"></div>
<div id="block-wrap">
    <div class="blocks" data-value="1782013 1882013 1982013">17/08 — 19/08</div>
    <div class="blocks" data-value="2182013 2282013 2382013">21/08 — 23/08</div>
    <div class="blocks" data-value="2582013 2682013 2782013 2882013 2982013">25/08 — 29/08</div>    
</div>

jQuery:

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"]'
    });
});

data-valueしたがって、属性に保存されているすべての日付を収集し、それらを変数として保存し、beforeshowday関数を介して渡して個別にスタイルを設定することは可能ですか? それが可能な場合は？どんな提案でも大歓迎です！

4

1 に答える 1

0

showBeforeDayオプションを見ることができます

$(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' : '', '']
        }
    });
});

デモ:フィドル

注: コメントで述べたように、data-value形式を少し変更しました。日付形式は次のように変更されています。ddmmyyyy

于 2013-08-20T03:21:41.087 に答える