2013-08-20 2 views
0

Я использую jQuery ui datepicker в сочетании с изотопным плагином и фильтром, чтобы отфильтровать divs по дате. Для того чтобы эта функция фильтра работала, дата была преобразована в строку и выгружена все нули, например. 20/08/2013 будет читать как 2082013. Я также использую функцию beforeShowDay, чтобы выделить соответствующие даты в подборщике даты, вот в чем проблема, в моем примере ниже, поскольку я использую этот формат даты. 1782013 1882013 1982013 также стиль 01/08/2013 и т. Д. (Как вы можете видеть в скрипка).
jsFiddle: http://jsfiddle.net/neal_fletcher/jPzK2/1/
JQuery:jQuery: beforeOhowDay date format issue

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

$(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 = date.getDate().toString() + (date.getMonth() + 1).toString() + date.getFullYear().toString(); 
      var contains = blocks.filter('[data-value*="' + target + '"]').length > 0; 
      return [true, contains ? 'special' : '', ''] 
     } 
    }); 
}); 

$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 успешно выдержаны в стиле выбора даты, но в связи с форматом даты он также стилизации 1-я - 9 августа тоже , В любом случае, как функция фильтра, так и функция beforeShowDay работают без этой проблемы?
& Да, изменяя формат даты, например. 21082013 действительно решает проблему стилизации beforeShowDay, но разрывает функцию фильтра, они оба должны работать.
Любые предложения были бы высоко оценены!

ответ

0

Вы используете * селектор в вашей beforeShowDay функции

('[data-value*="' + target + '"]') 

Поэтому 1 августа получил стиль - потому что это соответствует «2182013» значение. Измените его на селектор слов ~

('[data-value~="' + target + '"]') 
+0

спасибо большое за то, не могу поверить, что это было что-то настолько мал, я нарушающие покой мой мозг весь день в течение одного, ха! – user1374796