jQuery:beforeShowDay日期格式问题
问题描述:
我正在使用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
确实解决了样式问题,但打破了过滤功能,他们都需要工作。
任何建议将不胜感激!
答
您正在使用*选择在beforeShowDay
功能
('[data-value*="' + target + '"]')
这就是为什么8月1日得到了风格 - 因为它匹配“2182013”的价值。 其更改为一个单词选择〜
('[data-value~="' + target + '"]')
谢谢你这么多的是,真不敢相信这是一件那么小,我一直令人头大我的脑子整天都在不止一个,哈哈! – user1374796