jQuery datepicker：風格某些不同的日期

Question

我正在使用jQuery datepicker結合同位素插件過濾器功能來篩選取決於日期的div。 .blocks div每個都有通過data-value分配的日期，允許您過濾div。例如.blocks的第一個實例有3個日期1782013 1882013 1982013。我期望單獨對這些日期進行樣式設置，即data-value屬性中的每個日期實例，我希望在中分配一個單獨的類，以便它們的樣式可以不同。
的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: '→', 
     //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"]' 
    }); 
}); 

是因此它可以收集存儲在data-value屬性的所有日期，將它們存儲爲變量，並通過它們傳遞beforeshowday函數分別設置它們的樣式？如果這是可能的話？任何建議將不勝感激！

Answer 1

你可以看看showBeforeDay選項

$(function() { 
    var blocks = $('#block-wrap .blocks') 
    $('#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 + '"]' 
      }); 
     }, 
     beforeShowDay: function(date){ 
      var target = $.datepicker.formatDate('ddmmyy', date); 
      var contains = blocks.filter('[data-value*="' + target + '"]').length > 0; 
      return [true, contains ? 'special' : '', ''] 
     } 
    }); 
}); 

演示：Fiddle

注：正如我在評論說，我已經做出了data-value格式略有變化，日格式更改爲ddmmyyyy