Validate that time ranges are not overlapping

by hibbard_eu

HTML

<form>
    <div class="row">
        <fieldset>
            <legend>Time woked</legend>
            <label>Start:</label>
            <select class="start-hour">
                <option value="00">00</option>
                <option value="01">01</option>
                <option value="02">02</option>
                <option value="03">03</option>
                <option value="04">04</option>
                <option value="05">05</option>
                <option value="06">06</option>
                <option value="07">07</option>
                <option value="08">08</option>
                <option value="09">09</option>
                <option value="10">10</option>
                <option value="11">11</option>
                <option value="12">12</option>
                <option value="13">13</option>
                <option value="14">14</option>
                <option value="15">15</option>
                <option value="16">16</option>
                <option value="17">17</option>
                <option value="18">18</option>
                <option value="19">19</option>
                <option value="20">20</option>
                <option value="21">21</option>
                <option value="22">22</option>
                <option value="23">23</option>
            </select>
            <select class="start-minute">
                <option value="00">00</option>
                <option value="01">01</option>
                <option value="02">02</option>
                <option value="03">03</option>
                <option value="04">04</option>
                <option value="05">05</option>
                <option value="06">06</option>
                <option value="07">07</option>
                <option value="08">08</option>
                <option value="09">09</option>
                <option value="10">10</option>
                <option value="11">11</option>
                <option value="12">12</option>
                <option...

CSS

select {
    background: #ccc;
    padding: 3px;
    font-size: 16px;
    line-height: 1;
    border: 0;
    border-radius: 0;
    height: 34px;
}
.add, .add a {
    color: green;
    text-decoration: none;
}
.remove, .remove a {
    color: red;
    text-decoration: none;
}
#controls-row {
    padding-top:10px;
}
span {
    padding-right: 15px;
}
.hidden {
    display: none;
}
div {
    margin-bottom:15px;
}

JavaScript

function getTimeSelects(containingElement) {
    var selects = {};
    selects.startHour = containingElement.find(".start-hour");
    selects.startMinute = containingElement.find(".start-minute");
    selects.finishHour = containingElement.find(".finish-hour");
    selects.finishMinute = containingElement.find(".finish-minute");

    return selects;
}

function getTimeSelectsValuesInMinutes(containingElement) {
    var selects = getTimeSelects(containingElement);

    return [
    selects.startHour.val() * 60 + Number(selects.startMinute.val()),
    selects.finishHour.val() * 60 + Number(selects.finishMinute.val())];
}

$("#addBreak").on("click", function (e) {
    e.preventDefault();
    template.clone().insertBefore("#controls-row");
    $(".remove").show();
});

$("#removeBreak").on("click", function (e) {
    e.preventDefault();
    $("form").find(".breakRow").last().remove();
    if (!$("form").find(".breakRow").length) {
        $(".remove").hide();
    }
});

$("button").on("click", function (e) {
    e.preventDefault();
    var breakTimes = [];
    $(".breakRow").each(function () {
        var minutes = getTimeSelectsValuesInMinutes($(this));
        minutes.unshift($(this));
        breakTimes.push(minutes);
    });

    alert(breakTimes);
});

var template = $(".row").clone();
template.addClass("breakRow");
template.find("legend").text("Break taken");
$(".start-hour").val("09");
$(".finish-hour").val("17");