Filtering Out Every 15th Minute (i.e. 10:00, 10:15) Inputs After Specific XX:YY Input-CodePudding

Just wondering if there is a way i can reduce this code down as there is a lot of "getElementById", possibly using arrays etc? The main issue using arrays here (i believe) is the 2 hour time difference. disabled=true is also required for Internet Explorer (annoying) as display=none doesn't work on option selection boxes in IE.

<SCRIPT>
// IF TODAY IS SELECTED, ONLY ALLOW TIMES LATER IN THE DAY FROM DROP DOWN (2 hours in advance)
if (select.value == "<?php echo date("d-m-Y");?>") {
    if ("<?php echo date("H:i");?>" > "10:00") {document.getElementById("12:00pm").style.display = 'none'; document.getElementById("12:00pm").disabled = true;}
    if ("<?php echo date("H:i");?>" > "10:15") {document.getElementById("12:15pm").style.display = 'none'; document.getElementById("12:15pm").disabled = true;}
    if ("<?php echo date("H:i");?>" > "10:30") {document.getElementById("12:30pm").style.display = 'none'; document.getElementById("12:30pm").disabled = true;}
    if ("<?php echo date("H:i");?>" > "10:45") {document.getElementById("12:45pm").style.display = 'none'; document.getElementById("12:45pm").disabled = true;}
    if ("<?php echo date("H:i");?>" > "11:00") {document.getElementById("13:00pm").style.display = 'none'; document.getElementById("13:00pm").disabled = true;}
    if ("<?php echo date("H:i");?>" > "11:15") {document.getElementById("13:15pm").style.display = 'none'; document.getElementById("13:15pm").disabled = true;}
    if ("<?php echo date("H:i");?>" > "11:30") {document.getElementById("13:30pm").style.display = 'none'; document.getElementById("13:30pm").disabled = true;}
    if ("<?php echo date("H:i");?>" > "11:45") {document.getElementById("13:45pm").style.display = 'none'; document.getElementById("13:45pm").disabled = true;}
    if ("<?php echo date("H:i");?>" > "12:00") {document.getElementById("14:00pm").style.display = 'none'; document.getElementById("14:00pm").disabled = true;}
    if ("<?php echo date("H:i");?>" > "12:15") {document.getElementById("14:15pm").style.display = 'none'; document.getElementById("14:15pm").disabled = true;}
    if ("<?php echo date("H:i");?>" > "12:30") {document.getElementById("14:30pm").style.display = 'none'; document.getElementById("14:30pm").disabled = true;}
    if ("<?php echo date("H:i");?>" > "12:45") {document.getElementById("14:45pm").style.display = 'none'; document.getElementById("14:45pm").disabled = true;}
    if ("<?php echo date("H:i");?>" > "13:00") {document.getElementById("15:00pm").style.display = 'none'; document.getElementById("15:00pm").disabled = true;}
    if ("<?php echo date("H:i");?>" > "13:15") {document.getElementById("15:15pm").style.display = 'none'; document.getElementById("15:15pm").disabled = true;}
    if ("<?php echo date("H:i");?>" > "13:30") {document.getElementById("15:30pm").style.display = 'none'; document.getElementById("15:30pm").disabled = true;}
    if ("<?php echo date("H:i");?>" > "13:45") {document.getElementById("15:45pm").style.display = 'none'; document.getElementById("15:45pm").disabled = true;} 
    if ("<?php echo date("H:i");?>" > "14:00") {document.getElementById("16:00pm").style.display = 'none'; document.getElementById("16:00pm").disabled = true;}
    if ("<?php echo date("H:i");?>" > "14:15") {document.getElementById("16:15pm").style.display = 'none'; document.getElementById("16:15pm").disabled = true;}
    if ("<?php echo date("H:i");?>" > "14:30") {document.getElementById("16:30pm").style.display = 'none'; document.getElementById("16:30pm").disabled = true;}
    if ("<?php echo date("H:i");?>" > "14:45") {document.getElementById("16:45pm").style.display = 'none'; document.getElementById("16:45pm").disabled = true;}
    if ("<?php echo date("H:i");?>" > "15:00") {document.getElementById("17:00pm").style.display = 'none'; document.getElementById("17:00pm").disabled = true;}
    if ("<?php echo date("H:i");?>" > "15:15") {document.getElementById("17:15pm").style.display = 'none'; document.getElementById("17:15pm").disabled = true;}
    if ("<?php echo date("H:i");?>" > "15:30") {document.getElementById("17:30pm").style.display = 'none'; document.getElementById("17:30pm").disabled = true;}
    if ("<?php echo date("H:i");?>" > "15:45") {document.getElementById("17:45pm").style.display = 'none'; document.getElementById("17:45pm").disabled = true;}
    if ("<?php echo date("H:i");?>" > "16:00") {document.getElementById("18:00pm").style.display = 'none'; document.getElementById("18:00pm").disabled = true;}
    if ("<?php echo date("H:i");?>" > "16:15") {document.getElementById("18:15pm").style.display = 'none'; document.getElementById("18:15pm").disabled = true;}
    if ("<?php echo date("H:i");?>" > "16:30") {document.getElementById("18:30pm").style.display = 'none'; document.getElementById("18:30pm").disabled = true;}
    if ("<?php echo date("H:i");?>" > "16:45") {document.getElementById("18:45pm").style.display = 'none'; document.getElementById("18:45pm").disabled = true;}
    if ("<?php echo date("H:i");?>" > "17:00") {document.getElementById("19:00pm").style.display = 'none'; document.getElementById("19:00pm").disabled = true;}
    if ("<?php echo date("H:i");?>" > "17:15") {document.getElementById("19:15pm").style.display = 'none'; document.getElementById("19:15pm").disabled = true;}
    if ("<?php echo date("H:i");?>" > "17:30") {document.getElementById("19:30pm").style.display = 'none'; document.getElementById("19:30pm").disabled = true;}
    if ("<?php echo date("H:i");?>" > "17:45") {document.getElementById("19:45pm").style.display = 'none'; document.getElementById("19:45pm").disabled = true;}
    if ("<?php echo date("H:i");?>" > "18:00") {document.getElementById("20:00pm").style.display = 'none'; document.getElementById("20:00pm").disabled = true;}
}
</SCRIPT>

CodePudding user response：

Solution: Basically Use `filter()`

Give your elements classes, then get them with document.getElementsByClassName (MDN Web Link). After that, it's just a matter of using Array.from() on the HTMLCollection, then filter() to determine if you want to show the element or not.

Quick, Working Demo

Demo below: We hide everything after 12:42.

// IF TODAY IS SELECTED, ONLY ALLOW TIMES LATER IN THE DAY FROM DROP DOWN (2 hours in advance)
//var timevar = "<?php echo date("H:i");?>";
var timevar = "12:42";

Array.from(document.getElementsByClassName('time-div')).filter(function(e) {
    if(e.id > timevar) {
        e.style.display = 'none';
        e.disabled = true;
    }
});

<div id="12:00" >12:00</div>
<div id="12:15" >12:15</div>
<div id="12:30" >12:30</div>
<div id="12:45" >12:45</div>
<div id="13:00" >13:00</div>
<div id="13:15" >13:15</div>

CodePudding user response：

The best way i found to compress the script was using a .forEach()

if (select.value == "<?= date("d-m-Y"); ?>") {
    var time = '<?= date("H:i"); ?>';
    var target;
    var time_array = [{'10:00': "12:00pm"}, {'10:15': "12:15pm"}, {'10:30': "12:30pm"}, {'10:45': "12:45pm"}, {'11:00': "13:00pm"}, {'11:15': "13:15pm"}, {'11:30': "13:30pm"}, {'11:45': "13:45pm"}, {'12:00': "14:00pm"}, {'12:15': "14:15pm"}, {'12:30': "14:30pm"}, {'12:45': "14:45pm"}, {'13:00': "15:00pm"}, {'13:15': "15:15pm"}, {'13:30': "15:30pm"}, {'13:45': "15:45pm"}, {'14:00': "16:00pm"}, {'14:15': "16:15pm"}, {'14:30': "16:30pm"}, {'14:45': "16:45pm"}, {'15:00': "17:00pm"}, {'15:15': "17:15pm"}, {'15:30': "17:30pm"}, {'15:45': "17:45pm"}, {'16:00': "18:00pm"}, {'16:15': "18:15pm"}, {'16:30': "18:30pm"}, {'16:45': "18:45pm"}, {'17:00': "19:00pm"}, {'17:15': "19:15pm"}, {'17:30': "19:30pm"}, {'17:45': "19:45pm"}, {'18:00': "20:00pm"}];
    time_array.forEach(function(key, value) {
        if(time > key) {
            target = value;
        }
    });
    document.getElementById(target).style.display = 'none';
    document.getElementById(target).disabled = true;
}