Discussion :

[SBF33]

Bonjour,

J'aimerai réaliser sur mon site web un planning d'ouverture du magasin comme ceci :

Selon la date du jour il surligne la ligne correspondante, j'ai vu qu'on pouvais faire cela en JavaScript mais je n'y arrive pas.

Est-ce que quelqu'un pourrais m'aiguiller un peu pour réaliser se script ?

Merci d'avance pour votre aide.

[Bovino]

Date.prototype.getDay().

Ceci dit, si ta page utilise un langage serveur (par exemple PHP), il est préférable de gérer cela directement à la création de la page.
Si c'est une page statique HTML, alors JavaScript fera l'affaire.

[SBF33]

La page est bien statique.

Voila comment mon code HTML :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<h3>horaires : </h3>
<ul>
	<li class="">Lundi : 8h00-19h00</li>
	<li class="">Mardi : 8h00-19h00</li>
	<li class="">Mercredi : 8h00-19h00</li>
	<li class="">Jeudi : 8h00-19h00</li>
	<li class=>Vendredi : 8h00-19h00</li>
	<li class="">Samedi : Fermé</li>
	<li class="">Dimanche : Fermé</li>
</ul>

La commande Date.prototype.getDay() va me renvoyer le jour de la semaine pour la date spécifiée selon l'heure locale mais comment je fais ensuite pour surligner le jour dans mon <li> comme sur la photo ?

[Bovino]

Est-ce que quelqu'un pourrais m'aiguiller un peu

Pourquoi les discussions qui commencent par "je ne demande pas qu'on me le fasse, mais juste qu'on m'aiguille" finissent-elles toujours par "faites-le moi" ?

[SBF33]

C'est pas faux !

Je dit bien aussi je connais pas du tout Javascript donc ça coule un peu de source.

Par forcement me le faire mais juste m'expliquer un peu si possible car je ne vois pas du tout comment faire.

[Golgotha]

Pour une fois ça sera sans jQuery..

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
.today{    background-color : yellow;
}

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<h3>horaires : </h3><ul>
    <li class="day">Lundi : 8h00-19h00</li>
    <li class="day">Mardi : 8h00-19h00</li>
    <li class="day">Mercredi : 8h00-19h00</li>
    <li class="day">Jeudi : 8h00-19h00</li>
    <li class="day">Vendredi : 8h00-19h00</li>
    <li class="day">Samedi : Fermé</li>
    <li class="day">Dimanche : Fermé</li>
</ul>

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
var d = new Date();var n = d.getDay();
 
 
var items = document.getElementsByClassName('day');
items[n-1].classList.add("today");

J'ai mis un classe "day" pour toutes les li, ça me permet de les sélectionner en js avec document.getElementsByClassName('day');Ce qui me donne un tableau des li, il n'y à plus qu'a ajouter la classe "today" sur l'élément qui nous intéresse c'est à dire le jour de la semaine qui est donné avec getDay que Bovino avait déjà mis en lumière.

[SBF33]

Merci beaucoup pour ta gentillesse Golgotha.

J'essaye d'appliquer tes explication et je reviens vers vous pour vous dire si j'ai réussi.

[SBF33]

Le code js, je l'intègre dans ma page HTML ?

Si oui faut-il que je spécifie quelque chose en plus ?

[SBF33]

Dans ma page HTML j'ai rajouté le code suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
<script>
  var d = new Date();var n = d.getDay();
  var items = document.getElementsByClassName('day');
  items[n-1].classList.add("today");
</script>

Et lorsque j'actualise la page ça ne surligne pas la date du jour.

Alors que si je fais manuellement en remplaçant "day" par "today" ça fonctionne ce qui est normal.

Est-ce que j'ai fais une erreur ?

[SBF33]

Dans la console debug j'ai le message suivant :

Uncaught TypeError: Cannot read property 'classList' of undefinedlocalhost/:132 (anonymous function)

[Golgotha]

C'est juste un problème de timing :

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
document.addEventListener("DOMContentLoaded", function(event) {
 
var d = new Date();
var n = d.getDay();
 
var items = document.getElementsByClassName('day');
items[n-1].classList.add("today");
 
        });

[SBF33]

J'ai trouvé d'ou viens le problème.

Merci encore à toi Golgotha pour ton aide