选择中重叠时间的问题

时间:2013-09-14 13:45:39

标签: javascript jquery html

我们有这个代码,感谢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)。基本上脚本需要一些精炼,它将完美地工作。如果有人能帮助我,我会非常感激。提前谢谢。

1 个答案:

答案 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;
}