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

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

CodePudding user response：

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" ></div>
<div id="12:00" ></div>

CodePudding user response：

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" >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" >xyz</div>