2013-08-20 130 views
0

我正在使用jQuery ui datepicker结合同位素插件和过滤器功能按日期过滤掉div。为了使这个过滤器功能起作用,日期已经被转换成一个字符串并且规定了所有的零,例如, 20/08/2013将被读作2082013。我也使用beforeShowDay功能来突出显示日期选择器中的相关日期,这是问题所在,在我的示例中,因为我使用这种日期格式1782013 1882013 1982013也是样式01/08/2013等(如您在小提琴)。
的jsfiddle:http://jsfiddle.net/neal_fletcher/jPzK2/1/
的jQuery:jQuery:beforeShowDay日期格式问题

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的所有日期都成功风格日期选取器,但由于日期格式,它也是造型的8月1日至9日太。无论如何,filter函数和beforeShowDay函数都可以在没有这个问题的情况下工作吗?
&是,将日期格式改为例如21082013确实解决了样式问题,但打破了过滤功能,他们都需要工作。
任何建议将不胜感激!

回答

0

您正在使用*选择在beforeShowDay功能

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

这就是为什么8月1日得到了风格 - 因为它匹配“2182013”​​的价值。 其更改为一个单词选择〜

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

谢谢你这么多的是,真不敢相信这是一件那么小,我一直令人头大我的脑子整天都在不止一个,哈哈! – user1374796