Change background color of a div according to time

Question

I am trying to create a schedule. According to the current time the div background-color will change.

Working of the schedule
1) When current time exceeded appointment time add .dngr class to the div
2) When 1 hour is remaining for the interview add .ready class to the div

I am using PHP to create the page dynamically. Bootstrap 3 for the UI and moment.js for the clock

PHP code

<div class="col-md-3">
    <div class="thumbnail">
        <i class="glyphicon glyphicon-user"></i> <?php echo $name;?> <a href="#" data-toggle="modal" data-target="#<?php echo $u_id;?>" class="pull-right btn btn-primary view" data-placement="top" title="Click to view Resume"><i class="glyphicon glyphicon-eye-open"></i></a>
        <hr class="no-margin-top-bottom">
        <i class="glyphicon glyphicon-phone"></i> <?php echo $phone; ?>
        <br/><span class="interviewtime" data-time="<?php echo date('YmdHis', strtotime($schedule));?>"><i class="glyphicon glyphicon-time"></i> <?php echo date('F jS Y, h:i a', strtotime($schedule)); ?> </span>
    </div>
</div>

The above code will just display name , phonenumber and appointment time. Note.!! The above code will be placed inside a loop. There will be multiple appointments at a given time i have kept LIMIT 20

JQuery code

var repeater;

function showcurrenttime()
{
    $('.crnttym').text(moment().format('MMMM Do YYYY, h:mm:ss a'));
    repeater = setTimeout(showcurrenttime, 500);

    if ($('.interviewtime').data('time') < moment().format('YYYYMMDDHHmmss'))
    {
        $(this).parent().addClass('dngr');
    }       
}
showcurrenttime(); 

The above code will give the current time. The if() condition is a failed attempt to add .dngr class to a scheduled appointment, where the current time exceeds the appointment time.

CSS

.dngr{background-color: #D9534F;border-color: #D43F3A;color: white}
.ready{background-color: #128666;color: white} 

My Problem here is i cannot get the div to change background-color, and also the 2nd point of the working of schedule.All this should be done using javascript

Answer 1

I found the answer to my own question the problem was actually the selector. Thanks to @Blazemonger i found a way to select the right div

JQuery Code

var repeater;

function showcurrenttime()
{
    $('.crnttym').text(moment().format('MMMM Do YYYY, h:mm:ss a'));
    $('.interviewtime').each(function (i, el)
    {
        if ($(this).data('time') < moment().format('YYYYMMDDHHmmss'))
        {
            $(this).parent().addClass('dngr');
        };
        if ($(this).data('time') > moment().format('YYYYMMDDHHmmss') && $(this).data('time') < moment().add('h',1).format('YYYYMMDDHHmmss'))
        {
            $(this).parent().addClass('ready');
        };
    });
    repeater = setTimeout(showcurrenttime, 500);
}
showcurrenttime();

I am answering my own question as i manage to solve it with some help and others can refer to this as well

Answer 2

If you're comparing two dates, then compare them as dates, not as strings. (You can compare them as strings, but formatting can be tricky and, well, what's a Date object for if nobody uses it?)

Output the date in PHP using ISO 8601 format:

data-time="<?php echo date('c', strtotime($schedule));?> 

Then convert it to a JavaScript Date object:

var idate = new Date($('.interviewtime').data('time'));
var now = new Date();

and compare those two dates:

if (idate.getTime() < now.getTime())

---

After that, you need to fix your selector. $(this).parent().addClass('dngr'); won't do anything in that function because this is not defined.

Possibly you need a loop like this:

$('.interviewtime').each(function(i,el) {
    var idate = new Date($('.interviewtime').data('time'));
    var now = new Date();
    if (idate.getTime() < now.getTime()) {
        $(this).parent().addClass('dngr'); // 'this' is the current .interviewtime
    };
});

That said, there seems to be no justification for running this code every half-second (500ms). Once a minute should be enough.

Answer 3

If you are comparing dates in that way, you should cast $('.interviewtime').data('time') and moment().format('YYYYMMDDHHmmss') to int before comparing. You can use parseInt(String);

If you don't cast you are comparing Strings and that may be the error.

Also you have an API in momentjs to compare dates:

moment().diff(Moment|String|Number|Date|Array);

Answer 4

<?php
$appointment_time = you appointment time stamp
$current_time = current time

$class = '';

if($appointment_time < $current_time)
{
$class = 'dngr'
}
?>
<div class="<?php echo $class; ?>"></div>

you can apply css classes like this no need to add js