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
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.
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);
<?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
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.