我们有这个代码,感谢stackoverflow的一个有用的人,但它没有按预期完全工作。问题是它目前检查日期的完全匹配,但是有些时候彼此重叠并且也应该显示冲突(在发生冲突时背景变为红色)。您可以看到以下日期“星期三10月30日上午11:00 - 下午3:15”与10月30日星期三上午10:00至下午12:15重叠。显然,不能在不同的地方同时进行。
使用的代码是:
$(".time").change(function() {
var values = $("input.time").map(function(){
return $(this).val();
});
values.each( function (){
var overlapping = $("input.time[value='"+ this +"']");
if (overlapping.filter(":checked").length > 1){
overlapping.parents("tr").addClass("red");}
else{
overlapping.parents("tr").removeClass("red");
}
})
});
小提琴在这里:http://jsfiddle.net/3VFRt/
我知道需要做什么,但我似乎无法理解如何在jQuery中完成。我认为它需要从列(td)中提取日期数据并查看是否存在时间重叠,如果是,则相应地显示它(css class = red)。基本上脚本需要一些精炼,它将完美地工作。如果有人能帮助我,我会非常感激。提前谢谢。
答案 0 :(得分:1)
是的,您需要手动提取日期并进行比较。这是一个fiddle。另请参阅比较重叠日期的SO post。
$(".time").change(function() {
removeErrors();
var dateOverlapping = $("input.time:checked").filter(function() {
return $("input.time[value^='"+ $(this).val().split('|')[0] +"']:checked").length > 1;
});
dateOverlapping.each(function(i, elem){
var timeOverlapping = dateOverlapping.filter(function(i2, elem2) {
return i != i2 && overlaps(range($(elem).val().split('|')[1]),
range($(elem2).val().split('|')[1]));
});
if(timeOverlapping.length > 0)
$(elem).parents("tr").addClass('red');
else
$(elem).parents("tr").removeClass('red');
});
});
function removeErrors() {
$("input.time").each(function() {
$(this).parents("tr").removeClass('red');
});
}
function overlaps(range1, range2) {
return (range1.start <= range2.end) && (range2.start <= range1.end);
}
function range(time) {
var tms = time.split('-');
return {
start : timeToFloat(tms[0]),
end : timeToFloat(tms[1])
};
}
function timeToFloat(time)
{
var toks = time.trim().split(/\s+/);
var num = toks[0].trim().split(':');
var val = parseFloat(num[0]) + 0.01 * parseFloat(num[1]);
if(Math.floor(val) == 12)
{
if(toks[1].toLowerCase() == "am")
val -= 12;
}
else if(toks[1].toLowerCase() == "pm")
val += 12;
return val;
}