I understand how to get the current time with moment, now im just trying to compare the time with my div's ID. my div Ids are times In the format H:MM
HTML:
<div id="11:00" class="row time-div">
what I have so far Javascript:
//checking if the time slot is in the past present or future
//add classes to change style accordingly
$(".time-div").each(function () {
var timeDiv = $(this).attr("id").val();
if (currentHour == timeDiv) {
$(this).addClass("present");
} else if (currentHour < timeDiv) {
$(this).removeClass("present");
$(this).addClass("future");
} else if (currentHour > timeDiv) {
$(this).removeClass("future");
$(this).addClass("past");
}
});
The below only works for 24 hours:
let timedivs = document.querySelectorAll(".time-div");
var today = new Date();
timedivs.forEach((div) => {
const idVal = div.id.split(":");
const totalDivTime = idVal[0] * 3600 + idVal[1] * 60;
const currentTimeTotal = today.getHours() * 3600 + today.getMinutes() * 60;
if (currentTimeTotal > totalDivTime) {
div.classList.add("past");
div.innerHTML = "past will be added";
} else if (currentTimeTotal < totalDivTime) {
div.classList.add("future");
div.innerHTML = "future will be added";
} else {
div.classList.add("present");
div.innerHTML = "present will be added";
}
});<div id="22:00" class="row time-div"></div>
<div id="12:00" class="row time-div"></div>try it : (note : should move data to dataset of element, and it only work for hour)
$('button').on('click', function(){
let currentHour = $(this).data('hour')
$(".time-div").each(function () {
let timeDiv = $(this).attr('id')
if (currentHour == timeDiv) {
$(this).removeClass("future")
$(this).removeClass("past")
$(this).addClass("present")
} else if (currentHour < timeDiv) {
$(this).removeClass("present")
$(this).removeClass("past")
$(this).addClass("future")
} else if (currentHour > timeDiv) {
$(this).removeClass("present")
$(this).removeClass("future")
$(this).addClass("past")
}
})
$(".time-div-data-set").each(function () {
let timeDiv = $(this).data('hour')
if (currentHour == timeDiv) {
$(this).removeClass("future")
$(this).removeClass("past")
$(this).addClass("present")
} else if (currentHour < timeDiv) {
$(this).removeClass("present")
$(this).removeClass("past")
$(this).addClass("future")
} else if (currentHour > timeDiv) {
$(this).removeClass("present")
$(this).removeClass("future")
$(this).addClass("past")
}
})
}).time-div{
width: 100px;
height : 100px;
float:left;
margin-right: 10px;
text-align:center;
}
#time-div-data-set{
float:left;
}
.present{
background-color: red;
}
.future{
background-color: blue;
}
.past{
background-color: yellow;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="11:00" class="row time-div">abc</div>
<button id='future' data-hour='09:00'>future</button>
<button id='present' data-hour='11:00'>present</button>
<button id='past' data-hour='13:00'>past</button>
<div data-hour="11:00" class="row time-div time-div-data-set">xyz</div>