Highlight current day

donboe · March 27, 2018, 9:00am

In a website for a restaurant in the footer section I have the opening times like this:

				<div class="col-md-4 margin-b-30 wow fadeInUp" data-wow-delay="1.5s">
					<h3>Openingstijden</h3>
                    <ul class="openingtijden">
                    	<li>Maandag<span>12:00 - 22:00 uur</span></li>
                        <li>**Dinsdag<span>Closed</span>**</li>
                        <li>Wonsdag<span>12:00 - 22:00 uur</span></li>
                        <li>Donderdag<span>12:00 - 22:00 uur</span></li>
                        <li>Vrijdag<span>16:00 - 22:00 uur</span></li>
                        <li>Zaterdag<span>16:00 - 22:00 uur</span></li>
                        <li>Zondag<span>16:00 - 22:00 uur</span></li>
                    </ul>
				</div>

What I would like to accomplish is that the current day will be highlighted (bold and/or other color). I.e. Today is Tuesday so the word closed should be highlighted, and tommorow Wednesday and so on.

Is this doable with Javascript or should I use PHP ? Thank you in advance

marklenon95 · March 27, 2018, 9:14am

Yes it is doable with JavaScript.
Examine Date object in JavaScript and check for current date and highlight it by adding some CSS class to li element or however you want to accomplish this.

m_hutley · March 27, 2018, 9:34am

Are you loading any javascript helper frameworks?

jQuery:

$('.openingtijden li')[new Date().getDay()+6%7].addClass('highlightdate')

normal JavaScript

document.getElementsByClassname('openingtijen')[0].children()[new Date().getDay()+6%7].classlist.add('highlightdate')

(The math is necessary because Javascript defines a week as being 0-6, with 0 being sunday; to shift it to being Monday = 0 [My dutch isnt good, but i assume that’s what you’re doing], add 6 and modulo by 7.)

donboe · March 27, 2018, 9:40am

Yes I use jQuery!

donboe · March 27, 2018, 9:49am

Hi m_hutley. I tried both options, but neither is doing something:

CSS

<style>
.highlightdate
{
	color: #FF0000;	
}
</style>

Javascript

document.getElementsByClassname('openingtijden')[0].children()[new Date().getDay()+6%7].classlist.add('highlightdate');

What can be the reason?

m_hutley · March 27, 2018, 9:51am

Are you putting that line after the LI’s have been loaded, or before? Are there any errors in the javascript console?

donboe · March 27, 2018, 9:53am

It is at the bottom of the html., should I add it in the head?

m_hutley · March 27, 2018, 9:54am

Nope. Bottom’s the best place for it. That or wrapped in a $(document).ready()

The console’s not spitting anything out?

donboe · March 27, 2018, 9:57am

This is what the console spitting

Uncaught TypeError: document.getElementsByClassname is not a function

Thank you for the patience

m_hutley · March 27, 2018, 9:58am

Capitalize the n in ClassName. I got lazy.

donboe · March 27, 2018, 10:03am

I changed it Accordingly

<script>
$(document).ready(function(){
	document.getElementsByClassName('openingtijden')[0].children()[new Date().getDay()+6%7].classlist.add('highlightdate');
});
</script>

But still nothing

m_hutley · March 27, 2018, 10:09am

Eventually i’ll stop being lazy, I swear. Maybe when it’s not 6 AM.

$(document).ready(function(){
	document.getElementsByClassName('openingtijden')[0].children[new Date().getDay()+6%7].classList.add('highlightdate');
});

or

$(document).ready(function(){
	$('.openingtijden li')[(new Date().getDay()+6%7)].addClass('highlightdate')
});

either… should work.

donboe · March 27, 2018, 10:19am

Hahahaha. I’m realy not sure what I’m doing wrong her is the HTML:

<!doctype html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Css stylesheets -->

<link href="css/plugins.css" rel="stylesheet">
<link href="css/site.css" rel="stylesheet">

<style>
.highlightdate
{
	color: #FF0000;	
}
</style>
<title>Chinees fusion restaurant in Haarlem | De Draak</title>
</head>
<body>
 	<footer class="footer">
		<div class="container">
			<div class="row">
				<div class="col-md-4 margin-b-30 pr-5 wow fadeInUp" data-wow-delay="0.5s">
					<h3>Filosofie</h3>
                    <p>Lekkere smaken, gezonde ingrediënten en eindeloos genieten daar draait het om bij restaurant De Draak. Bij De Draak zijn onze klanten onze vrienden. Het begint al bij binnenkomst met onze vriendelijke bediening en warme atmosfeer waarbij elke gast zich meteen thuis voelt.</p><p>Dezelfde zorg die aan de sfeer wordt besteed hanteren we ook voor het eten. Chef Fan streeft naar culinaire hoogstandjes door veel aandacht te besteden aan de bron en de kwaliteit van de ingrediënten.</p>
				</div>
                <div class="col-md-4 margin-b-30 wow fadeInUp" data-wow-delay="1.0s">
                	<h3>Contact informatie</h3>
               		<div class="info">
                    	<div>
                        	<i class="fa fa-map-marker" aria-hidden="true"></i>
                            <p>Amsterdamstraat 24-26<br>2032 PP Haarlem</p>
                        </div>
                    	<div>
                        	<i class="fa fa-envelope" aria-hidden="true"></i>
                            <p>info@dedraakhaarlem.nl</p>
                        </div> 
                    	<div>
                        	<i class="fa fa-phone" aria-hidden="true"></i>
                            <p>+31 (0)6 4181 8579</p>
                        </div>                    
                    </div>
                </div>
				<div class="col-md-4 margin-b-30 wow fadeInUp" data-wow-delay="1.5s">
					<h3>Openingstijden</h3>
                    <ul class="openingtijden">
                    	<li>Maandag<span>12:00 - 22:00 uur</span></li>
                        <li>Dinsdag<span>Closed</span></li>
                        <li>Wonsdag<span>12:00 - 22:00 uur</span></li>
                        <li>Donderdag<span>12:00 - 22:00 uur</span></li>
                        <li>Vrijdag<span>16:00 - 22:00 uur</span></li>
                        <li>Zaterdag<span>16:00 - 22:00 uur</span></li>
                        <li>Zondag<span>16:00 - 22:00 uur</span></li>
                    </ul>
				</div>
			</div>
		</div>
	</footer>   
    
<script src="js/plugins.js"></script>
<script src="js/main.js"></script> 
<script>
$(document).ready(function(){
	$('.openingtijden li')[(new Date().getDay()+6%7)].addClass('highlightdate')
	//document.getElementsByClassName('openingtijden')[0].children[new Date().getDay()+6%7].classList.add('highlightdate');
});
</script> 
</body>
</html>

For the convenience I just left the footer section in! I tried both

m_hutley · March 27, 2018, 10:32am

Right. Different tack. More math. Actually remembering that modulo is a division operator and has a higher order of precedence.

$(document).ready(function(){
	$('.openingtijden li:nth-child('+(((new Date().getDay()+6)%7)+1)+')').addClass('highlightdate')
});

donboe · March 27, 2018, 10:43am

Mr . m_hutley, you’re hero This is working great . Thank you again for the patience. Now you can take some rest

Mittineague · March 27, 2018, 3:15pm

It depends. Do you want time based on a users clock or the server clock?

You could use “UTC” if it isn’t critical if a user mucks with their client-side.

system · June 26, 2018, 10:15pm

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.

Topic		Replies	Views
Highlighting today's date in a calendar JavaScript	5	13665	October 27, 2016
Highlighting Current Day on Javascript Calendar JavaScript	2	4841	December 4, 2010
Highlight particular day in time table JavaScript	2	2589	July 3, 2016
Need help with Javascript to highlight current page in menu JavaScript php , css	2	4478	August 9, 2018
Business hours on website JavaScript scripts	5	1371	January 5, 2023

Highlight current day

Related topics