Commentaires sur l'article Calendrier Javascript en 1 ligne de code

Salut,

J'ai fait quelques modification sur ton script pour intégrer plus la partie html

je veux bien te les envoyer mais j'ai pas trouver ton adresse.

Salut,

Tu peux me l'envoyer à patrice.k[arobase]niap3d.com

Merci

Merci ! pour ce magnifique calendrier !

bonjour,

je suis entrain de faire un site pour une association et j'ai besoin d'un calendrier.
Celui que vous avez développé me convient très bien mais voilà :
je ne suis très doué et je n'arrive pas à charger le code correctement.Celui qui m'intéresse c'est celui avec le bouton.
Avez vous un moment pour m'aider.

Bonsoir Philippe,

Cet été j'ai développé une page de configuration :
http://blog.niap3d.com/fr/5,10,news-42-Configurateur-de-calendrier-Javascript.html

Tout est prévu pour que vous puissiez créer un calendrier en quelque clics. Si vous avez des questions, n'hésitez pas.

Bonne intégration :-)

Bonjour,
Et merci pour votre réponse.
Quand je disais que ne je suis pas très doué, je devais être en dessous de la réalité.
J'ai paramétré le calendrier et je l'ai testé.
J'ai ouvert un dossier dans lequel j'ai créé 3 fichiers : 1 fichier calendrier.php dans lequel j'ai copié les liens vers le fichier href="calendrier/default_blue.css" et "calendrier/jsSimpleDatePickrMin.js". J'ai ensuite chaque fichier dans le fichier correspondant puis copier/collé le petit code HTML.
Et quand j'ai cliqué sur le lien le calendrier ne s'affiche pas !!
Si vous avez un moment vous pouvez m'envoyer les fichiers. Merci d'avance

Bonjour Philippe,

Vous avez un exemple de ce qui ne fonctionne pas en ligne ?

Vous pouvez également voir cet article :
http://blog.niap3d.com/fr/5,10,news-9-jsSimpleDatePickr-calendrier-Javascript-2-2.html

En bas de page il y a 2 exemples avec le code HTML qui va bien.

Bonjour Patrice,

Je n'arrive pas à faire fonctionner le calendrier.
Celui qui m'intéresse c'est celui qui s'affiche quand on clique sur un bouton.
Sauf que j'aimerai bien qu'il soit toujours affiché.
Voici tout le code que j'ai copié sur une seule page appelée calendrier.php

<script type="text/javascript">

var a = new jsSimpleDatePickr ('calendar');


// créer l'objet et envois l'identifiant du div dans lequel le calendrier sera affiché
var dateObj = new jsSimpleDatePickr('calendar');
// définit la fonction qui sera appelé en cliquant sur une date
dateObj.funcDateClic = 'calClick';
dateObj.classTable = 'calendar';
// class utilisé pour la cellule ()
dateObj.classTd = 'day';
// class utilisé pour la cellule qui contient le jour sélectionné
dateObj.classSelection = 'selectedDay';
// on enregistre le champ de texte qui contient la date
var dateFieldId = document.getElementById('dateField');
// on enregistre également le boc qui contient le calendrier et la navigation
var calendarWrapId = document.getElementById('calendarWrap');

// affiche le calendrier
function calnit(){
// initialise la date en fonction. Passe la valeur du champ de texte en paramètre
dateObj.setDate(dateFieldId.value);
// prépare le calendrier et l'affiche
dateObj.show('calendar');
// prépare le titre
calShowTitle();
// affiche le div qui contient le calendrier et la navigation
calendarWrapId.style.display = "block";
}
// inverse l'affichage du calendrier.
// si le calendrier est affiché, on le masque
// si le calendrier est masqué, on l'affiche
function calToogle(){
if(calendarWrapId.style.display == "block"){
calendarWrapId.style.display = "none";
}else{
calnit();
calendarWrapId.style.display = "block";
}
}
// navigue à travers les mois
function calMonthNav(val){
dateObj.setMonth(val);
dateObj.show();
calShowTitle();
}
// navigue à travers les années
function calYearNav(val){
dateObj.setYear(val);
dateObj.show();
calShowTitle();
}
// clic sur une date du calendrier. La date en paramètre est sous la forme 'JJ/MM/AAAA'
function calClick(dateStr){
// converti la date en array
var dateArr = dateStr.split('/');
// vérifie le format
if(parseInt(dateArr[0], 10)<10) dateArr[0] = '0'+dateArr[0];
if(parseInt(dateArr[1], 10)<10) dateArr[1] = '0'+dateArr[1];
// affiche la date dans le champ de texte
dateFieldId.value = dateArr[0]+'/'+dateArr[1]+'/'+dateArr[2];
// masque le calendrier
calendarWrapId.style.display = "none";
}
// affiche le titre
function calShowTitle(){
// liste des mois
monthName = ['Jan', 'Fév', 'Mar', 'Avr', 'Mai', 'Jui', 'Jul', 'Aou', 'Sep', 'Oct', 'Nov', 'Dec'];
document.getElementById('calendarTitle').innerHTML = monthName[dateObj.dateDisp.getMonth()]+' '+dateObj.dateDisp.getFullYear();
}
</script>


<style type="text/css">
/* DEBUT calendrier JS : jsSimpleDatePickr */
#calendarMain1, #calendarMain2{
margin-left: 20%;
}
/* conteneur calendrier */
.calendarWrap{
display: none;
position: absolute;
z-index: 1000;
width: 210px;
padding: 5px 10px 10px 10px;
background-color: #2e373f;
/*background-color: rgba(46, 55, 63, 0.95);*/
border-radius: 10px;
-moz-box-shadow: 0 0 10px #555;
-webkit-box-shadow: 0 0 10px #555;
box-shadow: 0 0 10px #555;
font-size: 12px;
}
/* bouton d'affichage*/
#calendarMain1 > input, #calendarMain2 > input{
display: block;
width: 100px;
height: 22px;
padding-top: 2px;
background-color: #2e373f;
color: #fff;
border-radius: 5px;
border: none;
}
#calendarMain1 > input:hover, #calendarMain2 > input:hover{
background-color: #2673cb;
}
/* navigation dans le calendrier */
.calendarWrap ul{
margin: 5px 0 10px 0;
padding: 0;
}
.calendarWrap li{
margin: 0;
padding: 0;
width: 20px;
display: inline-block;
*display: inline;
}
.calendarWrap li.calendarTitle{
width: 170px;
color: #ccc;
text-align: center;
}
.calendarWrap li input{
width: 20px;
background-color: #5d6f7f;
border: none;
color: #fff;
}
.calendarWrap li input:hover{
background-color: #6f8598;
}
/* calendrier */
.jsCalendar{
color: #fff;
border-collapse: collapse;
}
.jsCalendar th{
color: #8ba7bf;
font-size: 16px;
font-weight: normal;
text-align: center;
}
.jsCalendar td{
padding: 0;
border: none;
}
.jsCalendar a{
display: block;
width: 30px;
padding: 3px 0 3px 0;
color: #fff;
font-weight: bold;
text-decoration: none;
text-align: center;
}
.jsCalendar .day:hover a{
background-color: #2673cb;
border-color: #2673cb;
}
.jsCalendar .selectedDay a{
background-color: #c44d38;
border-color: #c44d38;
}
/* FIN calendrier JS : jsSimpleDatePickr */

</style>


<p><input type="text" name="date" id="dateField" value="" /></p>
<div id="calMain">
<input type="button" id="calToogle" value="Calendrier" onclick="calToogle();" />
<div id="calendarWrap">
<ul>
<li><input type="button" value="«" onclick="calYearNav('-1');" /></li><li><input type="button" value="‹" onclick="calMonthNav('-1');" /></li><li id="calendarTitle"> </li><li><input type="button" value="›" onclick="calMonthNav('+1');" /></li><li><input type="button" value="»" onclick="calYearNav('+1');" /></li>
</ul>
<div id="calendar"></div>
</div>
</div>

Merci pour votre patience

Bonjour Philippe,

Tel que vous l'avez fait ça ne peut pas fonctionner.
D'abord avec Javascript il ne faut pas appeler ou utiliser des éléments qui ne sont pas encore chargés. C'est pour ça qu'on conseille de placer le code Javascript en fin de fichier (ou après l'élément qui est utilisé).
Ensuite il manque l'objet javascript jsSimpleDatePickr dans le code.

Pour plus de simplificité vous avez le configurateur :
- http://blog.niap3d.com/calendrier-javascript/

Téléchargez le fichier jsSimpleDatePickrMin.js (http://blog.niap3d.com/calendrier-javascript/js/jsSimpleDatePickrMin.js)
et le thème (par exemple http://blog.niap3d.com/calendrier-javascript/css/default_blue.css) et utilisez le code html suivant :

<!DOCTYPE html>
<html lang="fr">
<head>
<title>Calendrier</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="default_blue.css" />
<script type="text/javascript" src="jsSimpleDatePickrMin.js"></script>
</head>
<body>

<div id="calendarMain" class="calendarMain"></div>
<script type="text/javascript">
//<![CDATA[
var calId = calInit("calendarMain", "Calendrier", "", "", "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"], true);
calShow(calId);
//]]>
</script>

</body>
</html>

Le tout dans le même dossier, ça devrait fonctionner. Par la suite vous pouvez ajouter le code javascript ou les styles CSS dans le fichier HTML si vous préférez.

Bonjour Patrice,
J'ai réussi à installer le calendrier. Et ça fonctionne !! Merci

Mais j'ai encore une question.
Dans le paramétrage j'ai indiqué que je voulais récupérer la date dans un input text. Est ce que je dois le créer sur ma page ? car je ne le vois pas.

Bonsoir Philippe,

Effectivement le code ne prend pas en charge la création du champ de formulaire.

Ca ne serait pas très logique de le créer en Javascript. Imaginons que Javascript soit désactivé (c'est rare, mais ça peut arriver), si le champs était ajouté en Javascript il n'y aurait rien.

Alors que s'il est créer en amont, même sans Javascript, le champ existe dans le formulaire.

Pour terminer l'intégration il faut créer le champ de formulaire et spécifier son identifiant dans la fonction calInit().
C'est le 3ème paramètre.

Bonjour, j'ai réussi à intégrer le calendrier JS avec la fonction callInit mais je souhaite en mettre deux dans une page. Comment faire?

Bonsoir Laurent,

Pour afficher deux calendriers sur la même page il faut créer deux blocs div dans lesquels insérer le calendrier et appeler deux fois la fonction calInit. Une fois pour chaque bloc div.

Voici un exemple :

<div id="calendarMain1" class="calendarMain"></div>
<div id="calendarMain2" class="calendarMain"></div>
<script type="text/javascript">
//<![CDATA[
var calId = calInit("calendarMain1", "", "", "", "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"], true);
calShow(calId);

var calId = calInit("calendarMain2", "", "", "", "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"], true);
calShow(calId);
//]]>
</script>

Merci , j'avais pas penser à créer deux variables.... aussi simple!

peut on utiliser cet outil avec plusieurs input de la même classe au lieu d'un seul input possédant un ID ?

Bonjour,

C'est possible en modifiant le code. Il faut changer les "getElementById" en "getElementsByClassName"

Mais si c'est dans le but d'avoir différents champs avec la même date je conseillerais plutôt :
1) soit d'ajouter un écouteur sur le champ qui contient la date du calendrier :
document.getElementById("identifiant_du_champ").addEventListener('change', function(){
// initialiser les autres champs avec la date
}, false);

2) Soit d'utiliser le configurateur qui permet de définir une fonction lorsqu'une date est cliqué :
http://blog.niap3d.com/fr/5,10,news-42-Configurateur-de-calendrier-Javascript.html

Bonjour Patrice

Tout d'abord merci pour ce script, léger, facile, parfait. Bravo aussi pour votre site, très agréable à utiliser.

J'ai intégré le canlendrier grace au configurateur, en mode affichage constant, sur ma page de liens herbergé en local et qui est ma page d'accueil de FF. Le calendrier s'y intègre à merveille.

Je souhaite vous poser une petite question : serait-il possible d'afficher en mode constant aussi, le 1er, voire le le 2ème mois suivant le mois courant, pour avoir le trimestre complet ?

Précision, je suis webdesigner et mes compétences JS cont très limitées.

Merci encore
Pierre

Bonsoir Pierre,

Content de voir que le script est utilisé.

Pour votre demande, c'est possible en bidouillant un peu.
Il faut utiliser des 3 calendriers sans titre et sans boutons de navigation et gérez vous même ces boutons et leurs styles.
En cliquant sur les boutons des mois suivant ou précédent, il faut recalculer les dates pour les mois +1 et +2 et réafficher les mois.

Exemple complet ci-dessous :

<!DOCTYPE html>
<html lang="fr">
<head>
<title></title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="black.css" />
<script type="text/javascript" src="jsSimpleDatePickr.js"></script>
<script type="text/javascript" src="jsSimpleDatePickrInit.js"></script>
</head>
<body>
<div id="calendarTitre">
<p id="calendar1Title" class="calendarTitle"></p>
<div class="calendar1Nav">
<input class="calendarNavML" type="button" onclick="calendrierNavPrev();" value="‹">
<input class="calendarNavMR" type="button" onclick="calendrierNavNext();" value="›">
</div>
</div>
<div id="calendarMain1" class="calendarMain"></div>
<div id="calendarMain2" class="calendarMain"></div>
<div id="calendarMain3" class="calendarMain"></div>
<script type="text/javascript">
//<![CDATA[
var listeMois = ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"];
var calendrier1 = calInit("calendarMain1", "", "", "", "M AAAA", "00", "jsCalendar", "day", "selectedDay", [], ["D", "L", "M", "M", "J", "V", "S"], true);
calShow(calendrier1);
var calendrier2 = calInit("calendarMain2", "", "", "", "M AAAA", "00", "jsCalendar", "day", "selectedDay", [], ["D", "L", "M", "M", "J", "V", "S"], true);
calShow(calendrier2);
var calendrier3 = calInit("calendarMain3", "", "", "", "M AAAA", "00", "jsCalendar", "day", "selectedDay", [], ["D", "L", "M", "M", "J", "V", "S"], true);
calShow(calendrier3);

function calendrierNavPrev(){
calMonthNav(calendrier1, '-1');
afficheTitre();
}
function calendrierNavNext(){
calMonthNav(calendrier1, '+1');
afficheTitre();
}
function afficheTitre(){
var e = document.getElementById('calendar1Title');
if(!e) return 0;
nb = calId2Nb(calendrier1);
var dateJS = jsSDPObj[nb][0].dateDisp;
e.innerHTML = listeMois[dateJS.getMonth()]+' '+dateJS.getFullYear();
CalendrierAfficheTrimestre(dateJS);
}
function CalendrierAfficheTrimestre(dateJS){
// calendrier 2
nb = calId2Nb(calendrier2);
dateJS.setMonth(dateJS.getMonth()+1);
jsSDPObj[nb][0].dateDisp.setMonth(dateJS.getMonth());
jsSDPObj[nb][0].dateDisp.setYear(dateJS.getFullYear());
jsSDPObj[nb][0].show();
// calendrier 3
nb = calId2Nb(calendrier3);
dateJS.setMonth(dateJS.getMonth()+1);
jsSDPObj[nb][0].dateDisp.setMonth(dateJS.getMonth());
jsSDPObj[nb][0].dateDisp.setYear(dateJS.getFullYear());
jsSDPObj[nb][0].show();
}
//]]>
</script>
</body>
</html>

Bonne intégration !

Bonjour et merci Patrice pour votre réponse.

J'ai fait plein de tests pour tenter de comprendre le code mais j'ai un peu de mal à le faire fonctionner.
Déjà, le code pris tel quel affiche d'abord 3 calendriers du même mois de décembre, ensuite si on clique sur un bouton, là ça fonctionne, on a bien les 3 mois qui se suivent.
Aussi, comment conserver les noms des mois au dessus de chacun d'eux plutôt que le nom du premier mois ?

Merci encore
Pierre

Correctif à mon message précédent : si on clique sur le bouton Next ça fonctionne, on a Janvier 2016, et si ensuite on clique sur Prev, on a fevrier 2016.

L'affichage du trimestre peut intresser votre communauté
Merci pour votre aide.

Bonjour Pierre,

Effectivement j'ai bricolé ça un peu rapidement. Voici un code plus simple, fonctionnel et mieux documenté :

<!DOCTYPE html>
<html lang="fr">
<head>
<title></title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="black.css" />
<script type="text/javascript" src="jsSimpleDatePickr.js"></script>
<script type="text/javascript" src="jsSimpleDatePickrInit.js"></script>
</head>
<body>
<div id="calendarTitre">
<p id="calendar1Title"></p>
<div class="calendar1Nav">
<input class="calendarNavML" type="button" onclick="CalendrierNavPrev();" value="‹">
<input class="calendarNavMR" type="button" onclick="CalendrierNavNext();" value="›">
</div>
</div>
<div id="calendar1Main" class="calendarMain"></div>
<p id="calendar2Title"></p>
<div id="calendar2Main" class="calendarMain"></div>
<p id="calendar3Title"></p>
<div id="calendar3Main" class="calendarMain"></div>
<script type="text/javascript">
//<![CDATA[
// nom des mois
var listeMois = ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"];
var listeJour = ["D", "L", "M", "M", "J", "V", "S"];
// initialise les calendriers
var calendrier1 = calInit("calendar1Main", "", "", "CalendrierClic", "M AAAA", "00", "jsCalendar", "day", "selectedDay", [], listeJour, true);
var calendrier2 = calInit("calendar2Main", "", "", "CalendrierClic", "M AAAA", "00", "jsCalendar", "day", "selectedDay", [], listeJour, true);
var calendrier3 = calInit("calendar3Main", "", "", "CalendrierClic", "M AAAA", "00", "jsCalendar", "day", "selectedDay", [], listeJour, true);

// affiche les calendriers
calShow(calendrier1);
calShow(calendrier2);
calShow(calendrier3);

// met à jour le trimestre
CalendrierAfficheTrimestre();

// mois précédent
function CalendrierNavPrev(){
calMonthNav(calendrier1, '-1');
CalendrierAfficheTrimestre();
}

// mois suivant
function CalendrierNavNext(){
calMonthNav(calendrier1, '+1');
CalendrierAfficheTrimestre();
}

// met à jour le trimestre d'après le premier calendrier
function CalendrierAfficheTrimestre(){
nb = calId2Nb(calendrier1);
var dateJS = new Date(jsSDPObj[nb][0].dateDisp.getTime());
// titre 1
CalendrierTitreAffiche('calendar1Title', dateJS);
// calendrier 2
dateJS.setMonth(dateJS.getMonth()+1);
CalendrierMAJ(calendrier2, dateJS);
CalendrierTitreAffiche('calendar2Title', dateJS);
// calendrier 3
dateJS.setMonth(dateJS.getMonth()+1);
CalendrierMAJ(calendrier3, dateJS);
CalendrierTitreAffiche('calendar3Title', dateJS);
}

// met à jour le titre (mois et année) d'un calendrier
//
// divId = identifiant HTML de la balise dans laquel afficher le titre
// dateJS = date javascript
function CalendrierTitreAffiche(divId, dateJS){
var e = document.getElementById(divId);
if(e) e.innerHTML = listeMois[dateJS.getMonth()]+' '+dateJS.getFullYear();
}

// met à jour un calendrier
//
// calendrierId = identifiant renvoyer par calInit
// dateJS = date javascript
function CalendrierMAJ(calendrierId, dateJS){
nb = calId2Nb(calendrierId);
jsSDPObj[nb][0].dateDisp.setMonth(dateJS.getMonth());
jsSDPObj[nb][0].dateDisp.setYear(dateJS.getFullYear());
jsSDPObj[nb][0].show();
}

// fonction appellé après un clic sur une date
function CalendrierClic(){
}
//]]>
</script>
</body>
</html>

Ne vous reste plus qu'à faire ou modifier votre feuille de style pour l'affichage des calendriers.

Yes !

Ca marche impeccablement.
Merci infiniment Patrice pour ta générosité et ta disponibilité.

Pierre

Bonjour Patrice,

Puis-je me permettre de vous demander une nouvelle question, le clic sur une date pourrait-il déclencher la création d'un événement sur le calendrier MSOutlook en local ?
Merci

Bonjour Pierre.

Je ne pense pas que ça soit possible.
Avec Google Calendar c'est possible avec un simple lien http.
Avec Outlook ou iCal il faut créer un fichier .ics à télécharger. Mais pour ça il faut passer il faut passer par PHP.

A tous hasard voici deux liens intéressants :
Pour Outlook :
- http://www.terminally-incoherent.com/blog/2008/04/14/generate-outlook-calendar-events-with-php-and-icalendar/

Pour iCal :
- http://www.myhow2guru.com/archives/php-generate-calendar-file-ics/

Oui merci, j'étais en train de lire ces liens mais je vais pas me lancer Winamp à chaque session Windows donc pas de php.

J'ai essayé de mettre l'url "outlook:" sur le href dans le js, et ça lance bien la page "Dossier personnel" d'Outlook (2003) mais pas un événement. Et en plus ca fonctionne juste avec "Ouvrir dans un nouvel ouglet"...

Ici, il y a une piste intéressante avec le registre mais j'y connais rien : http://www.arobase.org/forums/liens-html-vers-evenement-calendrier-outlook-2010-resolu-t26320.html

Bah, soit c'est simple, sinon, tant pis, je ne vais abuser de votre temps, merci encore

Pierre

S'il faut toucher au registre c'est pas une bonne piste.

Il faut peut-être chercher du côté des objets ActiveX ? Je ne sais pas s'ils existent toujours et ça ne doit fonctionner qu'avec Internet Explorer d'ailleurs.

Sinon j'ai vu qu'il était possible de créer un lien vers le calendrier Outlook en ligne.
J'imagine qu'il est possible de synchroniser le calendrier en ligne à Outlook en local, donc ça pourrait être une solution.

Dans ce sujet :
http://stackoverflow.com/questions/5831877/how-do-i-create-a-link-to-add-an-entry-to-an-calender/19867654#19867654

Bonjour,

J'aurais voulu savoir comment faire pour modifier le format de la date injectée dans le input par js (j'aurais voulu récupérer une date du style 2015-12-16).

Merci d'avance pour vos explications !

Max

Bonjour Max,

Vous pouvez masquer le champ utilisé par la fonction.
Quand la valeur de ce champ est modifié, vous pouvez convertir sa valeur de JJ/MM/AAAA à AAAA-MM-JJ et l'afficher dans un autre champ.

Sinon il faut modifier le code directement, ligne 98 :
field.value = dateArr[0]+'/'+dateArr[1]+'/'+dateArr[2];

À modifier en :
field.value = dateArr[2]+'-'+dateArr[1]+'-'+dateArr[1];

ça marche nickel (avec dateArr[0] pour les jours) merci pour votre réponse rapide !

Oui bien sûr :
field.value = dateArr[2]+'-'+dateArr[1]+'-'+dateArr[0];

Je met la remarque de côté pour adapter le format dans une prochaine mise à jour. Ca peut être utile.

Bonjour.
Bravo pour votre script : efficace et très bien fait !
Juste une question, est-il possible de faire une synchronisation comme ceci :
http://2008.kelvinluck.com/assets/jquery/datePicker/v2/demo/datePickerStartEnd.html
(pour faire une réservation entre 2 dates)
Merci...
Philippe

Bonjour Philippe,

Il est possible de synchroniser deux champs.

Il faut créer deux calendriers et pour chacun une fonction qui va vérifier si la date de l'autre calendrier doit être modifié.

calInit("ID_DIV_CALENDRIER_1", "", "ID_CHAMP_DATE_1", "Day1Init", "M AAAA", "01", "jsCalendar", "day", "selectedDay", monthLst, dayLst, false);
calInit(""ID_DIV_CALENDRIER_2", "", "ID_CHAMP_DATE_2", "Day2Init", "M AAAA", "01", "jsCalendar", "day", "selectedDay", monthLst, dayLst, false);

function Day1Init(aDate){
if(DateCompare('>')){
// si la date 1 est supérieur à la date 2, on change la date 2
document.getElementById('ID_CHAMP_DATE_2').value = aDate;
}
}
function Day2Init(aDate){
if(DateCompare('>')){
// si la date 1 est supérieur à la date 2, on change la date 1
document.getElementById('ID_CHAMP_DATE_1').value = aDate;
}
}
// compare les deux dates
/ j'utilise cette fonction sur un site de réservation de salle
function DateCompare(aMode){
var d1 = document.getElementById('ID_CHAMP_DATE_1');
d1 = d1.value.split('/');
d1 = new Date(d1[2], d1[1]-1, d1[0]);
var d2 = document.getElementById('ID_CHAMP_DATE_2');
d2 = d2.value.split('/');
d2 = new Date(d2[2], d2[1]-1, d2[0]);
switch(aMode){
case '>' : return d1>d2;
case '>=' : return d1>=d2;
case '=' : return d1.valueOf()==d2.valueOf();
case '<=' : return d1<=d2;
case '<' : return d1<d2;
}
return 0;
}

Cependant le calendrier n'affichera pas, visuellement, la sélection de date.
Il n'est prévu que pour afficher une seule date.

Bonjour.
Merci pour votre réponse !

Vous aurriez un exemple complet ?
voici le code sur lequel je travail mais je n'arrive pas à le faire fonctionner malgré vos explications :
<p>

<input type="text" name="ID_CHAMP_DATE_1" id="ID_CHAMP_DATE_1" value="" />
<div id="ID_DIV_CALENDRIER_1"></div>


<input type="text" name="ID_CHAMP_DATE_2" id="ID_CHAMP_DATE_2" value="" />
<div id="ID_DIV_CALENDRIER_2"></div>


<script type="text/javascript">
//<![CDATA[
calInit("ID_DIV_CALENDRIER_1", "", "ID_CHAMP_DATE_1", "Day1Init", "M AAAA", "01", "jsCalendar", "day", "selectedDay", "monthLst", "dayLst", false);
calInit("ID_DIV_CALENDRIER_2", "", "ID_CHAMP_DATE_2", "Day2Init", "M AAAA", "01", "jsCalendar", "day", "selectedDay", "monthLst", "dayLst", false);
//]]>
</script>




</p>
<script type="text/javascript">
function Day1Init(aDate){
if(DateCompare('>')){
// si la date 1 est supérieur à la date 2, on change la date 2
document.getElementById('ID_CHAMP_DATE_2').value = aDate;
}
}
function Day2Init(aDate){
if(DateCompare('>')){
// si la date 1 est supérieur à la date 2, on change la date 1
document.getElementById('ID_CHAMP_DATE_1').value = aDate;
}
}
// compare les deux dates
// j'utilise cette fonction sur un site de réservation de salle
function DateCompare(aMode){
var d1 = document.getElementById('ID_CHAMP_DATE_1');
d1 = d1.value.split('/');
d1 = new Date(d1[2], d1[1]-1, d1[0]);
var d2 = document.getElementById('ID_CHAMP_DATE_2');
d2 = d2.value.split('/');
d2 = new Date(d2[2], d2[1]-1, d2[0]);
switch(aMode){
case '>' : return d1>d2;
case '>=' : return d1>=d2;
case '=' : return d1.valueOf()==d2.valueOf();
case '<=' : return d1<=d2;
case '<' : return d1<d2;
}
return 0;
}

</script>

Si vous n'avez pas le temps, tant pis. En tout cas, Merci...

Bonjour, essayez ce code.
- Deux champs de date.
- En sélectionnant une date dans le calendrier 1, si la date 1 est supérieure à la date 2, la date 2 est changée
- En sélectionnant une date dans le calendrier 2, si la date 2 est inférieure à la date 1, la date 1 est changée

<!DOCTYPE html>
<html lang="fr">
<head>
<title></title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="black.css" />
<script type="text/javascript" src="jsSimpleDatePickr.js"></script>
<script type="text/javascript" src="jsSimpleDatePickrInit.js"></script>
</head>
<body>

<input type="text" name="ID_CHAMP_DATE_1" id="ID_CHAMP_DATE_1" value="" />
<div id="ID_DIV_CALENDRIER_1"></div>

<input type="text" name="ID_CHAMP_DATE_2" id="ID_CHAMP_DATE_2" value="" />
<div id="ID_DIV_CALENDRIER_2"></div>

<script type="text/javascript">
//<![CDATA[
var listeMois = ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"];
var listeJour = ["D", "L", "M", "M", "J", "V", "S"];
calInit("ID_DIV_CALENDRIER_1", "", "ID_CHAMP_DATE_1", "Day1Init", "M AAAA", "01", "jsCalendar", "day", "selectedDay", listeMois, listeJour, false);
calInit("ID_DIV_CALENDRIER_2", "", "ID_CHAMP_DATE_2", "Day2Init", "M AAAA", "01", "jsCalendar", "day", "selectedDay", listeMois, listeJour, false);

function Day1Init(aDate){
if(DateCompare('>')){
// si la date 1 est supérieur à la date 2, on change la date 2
document.getElementById('ID_CHAMP_DATE_2').value = aDate;
}
}

function Day2Init(aDate){
if(DateCompare('>')){
// si la date 1 est supérieur à la date 2, on change la date 1
document.getElementById('ID_CHAMP_DATE_1').value = aDate;
}
}

// compare les deux dates
// j'utilise cette fonction sur un site de réservation de salle
function DateCompare(aMode){
var d1 = document.getElementById('ID_CHAMP_DATE_1');
d1 = d1.value.split('/');
d1 = new Date(d1[2], d1[1]-1, d1[0]);
var d2 = document.getElementById('ID_CHAMP_DATE_2');
d2 = d2.value.split('/');
d2 = new Date(d2[2], d2[1]-1, d2[0]);
switch(aMode){
case '>' : return d1>d2;
case '>=' : return d1>=d2;
case '=' : return d1.valueOf()==d2.valueOf();
case '<=' : return d1<=d2;
case '<' : return d1<d2;
}
return 0;
}
//]]>
</script>
</body>
</html>

Bonsoir Patrice,
Je n'étais pas venu sur votre blog depuis plusieurs mois.
J'ai copié les différents fichiers pour le calendrier :
- jsSimpleDatePickrMin.js
- jsSimpleDatePickrInit.js
- jsSimpleDatePickr.js
- default_blue.css
je n'ai apporté aucune modification à ces fichiers car mes connaissances en js sont très très basic
Dans le fichier html j'ai :

<!DOCTYPE html>
<html lang="fr">
<head>
<title>Calendrier</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="default_blue.css" />
<script type="text/javascript" src="jsSimpleDatePickrMin.js"></script>
</head>
<body>

<p>Date : <input type="text" value="" name="date1" id="champ_date1" size="12" maxlength="10"></p>
<div id="calendarMain1"></div>
<script type="text/javascript">
//<![CDATA[
calInit("calendarMain1", "Calendrier", "champ_date1", "jsCalendar", "day", "selectedDay");
//]]>
</script>

</body>
</html>

le champ input text ainsi que le bouton sont bien affichés mais le calendrier ne s'affiche pas quand je clique sur le bouton.
Est ce que je peux vous demander de m'indiquer les modifications à faire dans les fichiers.
Avec mes remerciements

Bonsoir Philippe,

Il faut charger le fichier jsSimpleDatePickr :
<script type="text/javascript" src="jsSimpleDatePickr.js"></script>

Et normalement ça devrait être bon.

J'ai mis en place un configurateur que vous pouvez utiliser. Cela vous permet de paramétrer un peu plus facilement le calendrier.

Bonjour Patrice,
Ouf!! merci ça fonctionne.
En fait comme je n'y arrivais toujours pas, j'ai pris le 1er exemple du calendrier (adresse ci dessous) avec l'input text et le bouton.
Ensuite j'ai gardé uniquement les éléments qui me sont nécessaires.
http://blog.niap3d.com/fr/5,10,news-9-jsSimpleDatePickr-calendrier-Javascript-2-2.html

Tout fonctionne bien. J'ai juste une petite question. Quand je clique sur le bouton "calendrier" le calendrier s'affiche avec le mois de janvier. Quand je clique pour avoir le mois suivant c'est le mois de mars qui s'affiche et non le mois de février !! Si vous pouvez me dire comment remédier à ce petit inconvénient ce serait parfait.
Encore et bon dimanche

Pour le passage au mois suivant c'est un ancien bug qui doit venir du fait qu'on est le 31.

Regardez sur le configurateur, ce bug n'est plus présent :
http://blog.niap3d.com/calendrier-javascript/

Bonjour Patrice,
J'essaie de mettre le calendrier dans un <FORM> mais le calendrier ne s'affiche pas quand je clique sur le bouton.
Pouvez-vous m'aider ?
Merci d'avance

Bonjour Philippe,

Regardez avec l'inspecteur web ou FireBug si des erreurs sont affichées.

Sinon avez-vous essayé avec le configurateur ?
http://blog.niap3d.com/calendrier-javascript/

Bonjour Patrice,
Vous me conseillez le configurateur. Le calendrier fonctionne lorsqu'il n'est pas entre les balises <FORM></FORM>. D'autre part je n'ai rien touché aux scripts sauf l'emplacement du bouton dans le fichier css.
<FORM>
<input type="text" name="my_date" id="dateField" value="" style="width:90px"/><br />
<div id="calMain">
<input type="button" id="calToogle" value="Calendrier" onclick="calToogle();" />

<div id="calendarWrap">
<ul>
<li><input type="button" value="&laquo;" onclick="calYearNav('-1');" /></li><li><input type="button" value="&lsaquo;" onclick="calMonthNav('-1');" /></li><li id="calendarTitle"> </li><li><input type="button" value="&rsaquo;" onclick="calMonthNav('+1');" /></li><li><input type="button" value="&raquo;" onclick="calYearNav('+1');" /></li>
</ul>
<div id="calendar"></div>
</div>
</div>
</FORM>

Quand je fais une inspection voici ce que j'obtiens quand je clique sur l'onglet "sources" : j'ai une croix derrière <input type="button" id="calToogle" value="Calendrier" onclick="calToogle();" /> et si je pointe la souris sur la croix il est indiqué :"UncaughtTtypeError:calToogle is not a function".
Est ce que je peux vous envoyer les fichiers ?
Merci d'avance et bonne journée
Philippe

Les fichiers jsSimpleDatePickr.js et jsSimpleDatePickrInit.js sont bien chargés ?

Essayez de changer l'identifiant du bouton :
<input type="button" id="calToogle" value="Calendrier" onclick="calToogle();" />

Peut-être que le navigateur confond l'identifiant et la fonction.
Par exemple :
<input type="button" id="calBtToogle" value="Calendrier" onclick="calToogle();" />

Vous pouvez poster un lien de test, je regarderais ça sans problème.

Bonjour Patrice, je veux mettre un calendrier sur un site web et je trouve que le tien me convient très bien.
Je n'ai pas eu des problèmes pour l'afficher sur le site mais il y a une chose que j'aimerais faire et je n'arrive pas sans aide (je trouve que ça doit être simple mais je ne connais pas trop en programmation).
Je voudrais que quand on click sur une date spécifique, on s'affiche un fichier html, c'est-à-dire, faire d'une date un lien vers une archive html.
Mon idée est de pouvoir indiquer dans le code (avec le langage qui correspond) par exemple "quand on click sur le 10 octobre de 2016 montre mois telle archive o tel site".
Merci d'avance et merci beaucoup pour partager ton super calendrier!
Emanuel

Bonjour Emanuel,

Il faut utiliser la fonction de retour. C'est le 4ème paramètre de la fonction calInit(). Dans cet exemple la fonction s'appelle DateClic.

<div id="calendarMain" class="calendarMain"></div>
<script type="text/javascript">
//<![CDATA[
var calId = calInit("calendarMain", "", "", "DateClic", "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);
calShow(calId);

// la fonction est appelée après un clic sur une date
// Le paramètre dateStr est au format J/M/AAAA
function DateClic(dateStr){
// ici il faut vérifier le date est appeler le lien qui convient
window.location = 'http://www.test.fr';
}
//]]>
</script>

Merci pour la réponse. Jusqu'à là tout va bien pour moi. Ce que je n'arrive pas à faire est justement mettre la date. Imaginons le 10 octobre.

function DateClic(dateStr){

// c'est ici que je dois mettre la date?
// comme ça : 10/10/2016?
// il faut mettre quelque chose avant la date?

window.location = 'http://www.test.fr';
}

Merci!

L'étape suivante c'est de mettre en place les liens entre les dates et les URL.
Par exemple dans un objet Javascript. La date en propriétés et l'adresse en valeur :
var o = {};
o.date10102016 = 'http://www.test.fr';
o.date15102016 = 'http://www.exemple.fr';

Par exemple quelque chose comme :

<script type="text/javascript">
//<![CDATA[
var calId = calInit("calendarMain", "", "", "DateClic", "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);
calShow(calId);

// crée la liste des dates
var dateLst = {};
dateLst.date10102016 = 'http://www.test.fr';
dateLst.date15102016 = 'http://www.exemple.fr';
// etc

// la fonction est appelée après un clic sur une date
// Le paramètre dateStr est au format J/M/AAAA
function DateClic(dateStr){
// converti la date
var d = dateStr.split('/');
d = 'date'+d[0]+d[1]+d[2];
// vérifie si la date existe. si c'est le cas affiche l'url
if(dateLst.hasOwnProperty(d)) window.location = dateLst[d];
}
//]]>
</script>

Ok. J'ai compris. J'essai ce soir.

Merci beaucoup Patrice!

Bonjour et MERCI !!!
Merci d'avoir fait un calendrier pour les nuls ;-)
Il est installé, intégré dans un formulaire dynamique et fonctionne.
Par contre, il démarre en 1929....? et pourquoi dans les reglages 'datecentury' avons nous 20 comme valeur ? Nous sommes au 21ème siècle..

En mode responsive il fonctionne aussi mais l'affichage ne va pas du tout. Je vais voir si je peux arranger cela et communiquer la solution

Bonjour Patrick et merci.

Alors datecentury correspond aux premiers chiffres d'affichage d'une date à 4 chiffre.
datecentury = 20 => 2018
datecentury = 19 => 1918
C'est vrai que ça pourrait être changé pour correspondre au vrai siècle, mais c'est le siècle pour les fénéants ;-)

Pourquoi est-ce qu'il démarre en 1929 ? Par défaut si le calendrier n'a pas de valeur pas défaut il démarre au jour même sinon il prend la valeur du champ.

Je l'utilise en responsive sans problème, je mettrais les nouveaux styles à l'occasion.

Bonjour, je recopier vos code j'ai suivi tous les consignes mais ça ne fonctionne pas. De même en MVC ne fonctionne pas !

Si c'est possible d'envoyer tous le code, ça serais vraiment sympas de vos part.

Merci encore une fois :)

Bonjour DURAN,

Vous avez un exemple en ligne quelque part ?

Vous avez bien utilisé la dernière version ?

Bonjour Patrice,
J'essaye de créer un formulaire avec une zone input type text qui au clic me permettra d'ouvrir votre calendrier pour y sélectionner une date.
Je suis débutante en javascript, et j'ai beau suivre toutes ves instructions à la lettre (intégration du script à mon fichier html, intégration du lien vers le fichier js contenant les fonctions, et du lien vers le css), rien n'y fait ; le calendrier ne s'affiche absolument pas, et quand j'essaye de créer le calendrier sur une nouvelle page html à part, j'ai une page blanche qui s'affiche.
Auriez-vous une idée de ce qui pourrait me bloquer..?
Je vous remercie par avance pour votre aide précieuse.
Lucie

Bonjour Lucie,

Vous avez un exemple en ligne que je puisse voir ?

pas encore.. mais serait-il possible que je vous fasse passer les 3 fichiers que j'ai créés pour que vous me disiez ce que vous en pensez?

oui vous pouvez me les envoyer par email (patrice.k[arobase]niap3d.com)