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

Question

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>

As punishment, you will copy a hundred of time : `"I should not duplicate code"`, but using only 2 lines of code. — Cid, Dec 11 '21 at 16:45
Find the patterns. Your JavaScript is “get something by ID and do something with it”, which can be boiled down to a function. Your time variables could be two loops, one from 10 to 18, the other the four time intervals, or you could do one loop in time-ish increments. — Chris Haas, Dec 11 '21 at 16:52
This question probably belongs to [codereview](https://codereview.stackexchange.com/) — Cid, Dec 11 '21 at 16:55

HoldOffHunger · Accepted Answer · 2021-12-11T19:27:38.793

0

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";

var tmp = document.getElementsByClassName('time-div');
var temp_array = [],
length = tmp.length;

for (var i = 0; i < length; i++) {
temp_array.push(tmp[i]);
}

temp_array.filter(function(e) {
    if(e.id > timevar) {
        e.style.display = 'none';
        e.disabled = true;
    }
});

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

edited Dec 11 '21 at 19:27

answered Dec 11 '21 at 17:25

HoldOffHunger

18,769
10
104
133

Brilliant solution, but does not work in IE : Object doesn't support property or method 'from' – Mike 'Ambroid' Foran Dec 11 '21 at 19:21
Hey, @Mike'Ambroid'Foran , [you are right, just fixed that up](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from). Just used the solution here: [https://stackoverflow.com/a/41261546/2430549](https://stackoverflow.com/a/41261546/2430549) Should be working now. – HoldOffHunger Dec 11 '21 at 19:28
Oh, hey, don't forget that it's helpful to others if you [accept an answer](https://stackoverflow.com/help/someone-answers#:~:text=To%20accept%20an%20answer%3A&text=To%20mark%20an%20answer%20as,the%20answer%2C%20at%20any%20time.), if it's useful, thanks! – HoldOffHunger Dec 11 '21 at 19:51
Yes it would appear the solution works :) – Mike 'Ambroid' Foran Dec 11 '21 at 19:56

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

1 Answers1

Solution: Basically Use `filter()`

Quick, Working Demo