Commentaires sur l'article Configurateur de calendrier Javascript

Je reviens sur nos échanges de mail en passant par le blog car je pense que ceci peut intéresser d'autres personnes.
Dans le cas de plusieurs dates sur une même page,
- J'utilise une variable dans le champ input à mettre à jour,
- J'appelle la fonction calInit en lui transmettant cette variable à la place du nom du champ.
- J'affiche le calendrier en permanence en ajoutant au-dessus un titre indiquant le nom du champ qui a le focus.

Pour ce dernier point, j'ai inhibé les ligne de code contenant display="none". Je trouve cette solution inélégante. J'ai alors essayé d'ajouter un paramètre constDisplay facultatif dans l'appel de la fonction. La valeur false ou true est alors ajoutée au tableau jsSDPObj. Je rencontre une difficulté pour récupérer cette valeur afin d'inhiber le masquage du calendrier. Lorsqu'elle vaut true, le calendrier doit rester affiché.
Marc

D'abord merci pour la fonction qui permet de configurer le calendrier. Comment faire une fonction qui fait pareil en retournant un timestamp. j'ai besoin des heures aussi.

Un timestamp en Javascript ?

Il faut utiliser getTime()

https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Date/getTime

Attention, la fonction renvoi des millisecond, donc il faut les convertir en second pour avoir un timestamp unix.

je me demande comment faire pour afficher le jour de la date selectionné sur le calendrier ?

Merci

PS : tres beau calendrier

Bonjour John,

Il faut définir une classe qui est appliquée à la cellule du jour sélectionné.

Dans l'exemple suivant :
calId = calInit("calendarMain", button, fieldAttach, funcName, titleMask, navY+navM, "jsCalendar", "day", "selectedDay", monthName, dayName, constDisplay);

- "jsCalendar" est la classe du tableau qui contient le calendrier
- "day" est la classe d'un jour du mois
- "selectedDay" est la classe du jour sélectionné

Le code généré est un lien dans la cellule du tableau :
<td class="selectedDay">
<a onclick="calClick('28/12/2015', 'calendar1');return false;" href="#">28</a>
</td>

Dans votre fichier CSS, vous pouvez modifier le style en accédant au lien avec :
.jsCalendar .selectedDay a {
/* ici les styles du lien */
}

Bonjour Patrice,

Merci pour ta réponse ultra rapide, j'essaie de mieux comprendre ton code pour éviter de trop te déranger.

J'ai du mal m'exprimer, en fait j'aimerais par exemple, quand l'utilisateur clique sur le 6 janvier, j'ai la date selectionné avec dateStr mais j'aimerais pouvoir lui dire " Ok pour le Mercredi du 06 janvier mais tu peux aussi venir le vendredi 08 si tu veux " ( avec une fonction style calDayNav('+2')

Si tu m'avais bien compris désolé de la répétition

Re,

J'ai reussi à faire à peu près ce que je voulais faire j'ai une simple question lorsqu'on clique sur une date peut on ressortir l'objet date sur laquelle on a cliquer ?

encore Merci

Tu peux supprimer mes spam désolé... Mais j'ai trouver ce que je cherchais j'ai ajouter une fonction qui remplit un tableau de la semaine en commencant par le jour selectionné par l'utilisateur.

Voilou et encore merci pour ton calendrier simple et efficace ;)

J'essaie qu'on ne puisse pas cliquer sur les dates deja passées mais je galère au niveau de la condition je comprend pas trop pourquoi ça ne marche pareil


dateA = new Date();
day= new Date(year, month+1, dateA.getDate());





// condition ajouter pour qu'on ne puisse pas cliquer sur une date expiré
if(day > dateA ){
h += '<td class="'+(i==today ? me.classSelection:me.classTd)+'"><a href="#"'+(me.funcDateClic!='' ? ' onclick="'+me.funcDateClic+'(\''+i+'/'+(month+1)+'/'+year+'\', \''+me.id+'\');return false;"':'')+'>'+i+'</a></td>';
}
else
{
h += '<td class="'+(i==today ? me.classSelection:me.classTd)+'"><a>'+i+'</a></td>';

}

je poste ici la petite amélioration apportée à mes besoin pour qu'on ne puisse pas cliquer sur une date passée


day= new Date(year, month, i);
heureAvant = 12 // Ceci correspond au nombre d'heure avant la fin du jour a laquelle nous pouvons encore cliqué

/* Cette partie sert juste a rendre le jour d'aujourd'hui encore dispo selon une heure établie */
nbM = day.getTime();
OneDate = 1000 *60 *60 * heureAvant;
nbM = nbM + OneDate ;

day=new Date(nbM); // condition ajouter pour qu'on ne puisse pas cliquer sur une date expiré
if(day >= dateA){
h += '<td class="'+(i==today ? me.classSelection:me.classTd)+'"><a href="#"'+(me.funcDateClic!='' ? ' onclick="'+me.funcDateClic+'(\''+i+'/'+(month+1)+'/'+year+'\', \''+me.id+'\');return false;"':'')+'>'+i+'</a></td>';
}
else
{
h += '<td class="'+(i==today ? me.classSelection:me.classTd)+'"><a>'+i+'</a></td>';
}

Bonjour John,

Merci pour ta solution.

Tu place ton code dans le jsSimpleDatePickr.js je suppose ?

N'oublie de déclarer tes variables avec var sinon elles seront déclarés sous windows et seront globales ;-)

bonjour,
ce script fonctionne parfaitement, mais il y a une chose que je n'arrive pas à faire, ni dans le code js ni le css :
je voudrais que le calendrier soit masqué par défaut et révélé seulement quand on clique sur le bouton.
J'ai utilisé le configurateur.
merci pour cet excellent travail.

Bonjour thy,

Il suffit de supprimer la ligne "calShow(calId);" et le calendrier ne sera plus affiché par défaut.

<div id="calendarMain" class="calendarMain"></div>
<script type="text/javascript">
//<![CDATA[
var calId = calInit("calendarMain", "", "", "", "M AAAA", "01", "jsCalendar", "day", "selectedDay", ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"], ["D", "L", "M", "M", "J", "V", "S"], false);
//]]>
</script>