CODEWITHSUNDEEP
javascripthtml
mrk
mrk

Reputation: 99

How to compare html time to current time and change color

So I have a table with different times in a td tag. I want to compare the times in the tds to the current time and depending on that I want to change the color via javascript:

Could you please tell me what I have to put in my if argument/comparison in the bottom of my code?

<div class="container">
    <div class="row">
        <div class="col-lg-12">
            <table class="table">
                <thead>
                    <tr>
                        <th>FlightNr</th>
                        <th>from</th>
                        <th>scheduled</th>
                        <th>Gate</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>KP7809</td>
                        <td>Queilén</td>
                        <td class="time">06:30</td>
                        <td>M13</td>
                    </tr>
                    <tr>
                        <td>BR2168</td>
                        <td>Gargazzone/Gargazon</td>
                        <td class="time">07:45</td>
                        <td>N12</td>
                    </tr>
                    <tr>
                        <td>GN5746</td>
                        <td>Surat</td>
                        <td class="time">08:50</td>
                        <td>X58</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<script>
    var now = new Date();
    var h = now.getHours();
    var m = now.getMinutes();
    var x = document.getElementsByClassName("time");
    for (var i = 0; i < x.length; i++) {
        if(time in td tags are older than current time)
        x[i].style.color ="red";
    }
</script>

Upvotes: 2

Views: 580

Answers (3)

zabusa
zabusa

Reputation: 2719

Convert the time in to a date object and compare it with the current date.

var now = new Date();
    var x = document.getElementsByClassName("time");
    for (var i = 0; i < x.length; i++) {
        var time = new Date(Date.parse('01/01/2011'+ ' ' + x[i].innerHTML))
        if(time < now){
        console.log(x[i].innerHTML)
            x[i].style.color = "red";
        }
        
    }
<div class="container">
    <div class="row">
        <div class="col-lg-12">
            <table class="table">
                <thead>
                    <tr>
                        <th>FlightNr</th>
                        <th>from</th>
                        <th>scheduled</th>
                        <th>Gate</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>KP7809</td>
                        <td>Queilén</td>
                        <td class="time">06:30</td>
                        <td>M13</td>
                    </tr>
                    <tr>
                        <td>BR2168</td>
                        <td>Gargazzone/Gargazon</td>
                        <td class="time">07:45</td>
                        <td>N12</td>
                    </tr>
                    <tr>
                        <td>GN5746</td>
                        <td>Surat</td>
                        <td class="time">08:50</td>
                        <td>X58</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

Upvotes: 0

Idan Beker
Idan Beker

Reputation: 363

I have used timestamps to compare the current date and your desired date. Note that I'am assuming that the dates on the table are on the same day of today. Cheers.

var now = new Date();   
var timeContainers = document.getElementsByClassName("time");

for (var i = 0; i < timeContainers.length; i++) {
   var [hours,minutes] = timeContainers[i].innerHTML.split(':');
   var dateToCompare = new Date(now.getFullYear(),now.getMonth(),now.getDate(),Number(hours),Number(minutes))
    if(now.valueOf() - dateToCompare.valueOf() > 0){
      timeContainers[i].style.color='red';
    }
}
<div class="container">
    <div class="row">
        <div class="col-lg-12">
            <table class="table">
                <thead>
                    <tr>
                        <th>FlightNr</th>
                        <th>from</th>
                        <th>scheduled</th>
                        <th>Gate</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>KP7809</td>
                        <td>Queilén</td>
                        <td class="time">06:30</td>
                        <td>M13</td>
                    </tr>
                    <tr>
                        <td>BR2168</td>
                        <td>Gargazzone/Gargazon</td>
                        <td class="time">07:45</td>
                        <td>N12</td>
                    </tr>
                    <tr>
                        <td>GN5746</td>
                        <td>Surat</td>
                        <td class="time">08:50</td>
                        <td>X58</td>
                    </tr>
                    
                     <tr>
                        <td>GN5746</td>
                        <td>Surat</td>
                        <td class="time">18:50</td>
                        <td>X58</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

Upvotes: 1

AGoranov
AGoranov

Reputation: 2244

You have to convert the value from string to an int. After this, you can compare it with the current time. Thus, your loop would look like:

var hoursInTd = parseInt(x[i].innerText.split(':')[0]) 
var minutesInTd = parseInt(x[i].innerText.split(':')[1])

if (hoursInTd > h) {
   // hours in td are later
   x[i].style.color ="red";
} else if (hoursInTd === h && minutesInTd > m) {
   // hours are same, but the minutes are later
   x[i].style.color ="red";
}

Hope it helps.

Upvotes: 1

Related Questions