Par jsuis à 19h41 :
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
Par alimou à 17h55 :
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.
Par Patrice à 20h34 :
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.
Par john à 17h17 :
je me demande comment faire pour afficher le jour de la date selectionné sur le calendrier ?
Merci
PS : tres beau calendrier
Par Patrice à 17h47 :
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 */
}
Par john à 12h22 :
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
Par john à 16h13 :
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
Par john à 16h51 :
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 ;)
Par john à 19h11 :
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>';
}
Par john à 11h52 :
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>';
}
Par Patrice à 19h49 :
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 ;-)
Par thy à 15h55 :
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.
Par Patrice à 09h54 :
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>