I have a select field which contains option fields with hours and minutes like this:
<select name="" id="delyvery-hour">
<option value="18:00">18:00</option>
<option value="18:05">18:05</option>
<option value="18:15">18:15</option>
<option value="18:20">18:20</option>
<option value="18:25">18:25</option>
<option value="18:30">18:30</option>
<option value="18:35">18:35</option>
<option value="18:40">18:40</option>
<option value="18:45">18:45</option>
<option value="18:50">18:50</option>
<option value="18:55">18:55</option>
<option value="19:00">19:00</option>
<option value="19:05">19:05</option>
<option value="19:15">19:15</option>
<option value="19:20">19:20</option>
<option value="19:25">19:25</option>
<option value="19:30">19:30</option>
<option value="19:35">19:35</option>
<option value="19:40">19:40</option>
<option value="19:45">19:45</option>
<option value="19:50">19:50</option>
<option value="19:55">19:55</option>
<option value="20:00">20:00</option>
</select>
I'm using jquery to detect the current time and remove the options front the select with the passed hours.
What I want to achieve is to display only the options which are 50 min ahead.
For example if now is 18:00 I need to see the option with time from 18:50 or if the current hour is 19:20 to show the options from 20:10 and etc.
Here is the example: https://codepen.io/7lifedesign/pen/dyvaxWW
var dt = new Date();
var time = dt.getHours();
document.write(time);
$('#delyvery-hour option').filter(function(){
return parseInt(this.value,10) < time;
}).remove();
This is pretty straightforward: retrieve the current date, add 50 minutes to it, and store it in hh:mm format. Then filter your <option> tags to remove any option whose value is less than (string-wise, not numerically) the given hh:mm.
function pad2(n) {
if (n < 10) {
n = '0' + n;
}
return n;
}
var dt = new Date();
dt.setMinutes ( dt.getMinutes() + 50 ); // 50 minutes from now
var hhmm = pad2(dt.getHours()) + ':' + pad2(dt.getMinutes()); // e.g. 18:05
//document.write(hhmm);
$('#delyvery-hour option').filter(function(){
return this.value < hhmm;
}).remove();<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<select name="" id="delyvery-hour">
<option value="18:00">18:00</option>
<option value="18:05">18:05</option>
<option value="18:15">18:15</option>
<option value="18:20">18:20</option>
<option value="18:25">18:25</option>
<option value="18:30">18:30</option>
<option value="18:35">18:35</option>
<option value="18:40">18:40</option>
<option value="18:45">18:45</option>
<option value="18:50">18:50</option>
<option value="18:55">18:55</option>
<option value="19:00">19:00</option>
<option value="19:05">19:05</option>
<option value="19:15">19:15</option>
<option value="19:20">19:20</option>
<option value="19:25">19:25</option>
<option value="19:30">19:30</option>
<option value="19:35">19:35</option>
<option value="19:40">19:40</option>
<option value="19:45">19:45</option>
<option value="19:50">19:50</option>
<option value="19:55">19:55</option>
<option value="20:00">20:00</option>
</select>