Commentaires sur l'article jsSimpleDatePickr calendrier Javascript gratuit

Bonjour, j'aimerai bien afficher ce calendrier sur mon site internet mais je n'y connais rien en code. Tout ce que je sais faire c'est de copier coller un code -_-.

Pourriez vous me guider pas à pas pour l'intégration de celui-ci ?

Merci beaucoup.

Bonjour,

Vous pouvez regarder l'article Calendrier Javascript en 1 ligne de code : http://blog.niap3d.com/fr/5,10,news-13-Calendrier-Javascript-en-1-ligne-de-code.html

En cliquant sur l'exemple, vous avez le code HTML à copier coller ainsi que les fichiers Javascript à télécharger et à lier dans le document HTML.

Il y a également les styles CSS si vous voulez.

Bonne intégration.

le formulaire fonctionne bien sauf que j'ai 29 "undefined" (pour juillet 2014) qui s'affiche à droite du "D" du dimanche.

une solution ?

Bonjour,

Comme ça je ne vois pas.

Je peux voir un exemple de page avec ce problème ?

le calendrier est dans la zone texte "Date d'arrivée" : http://villaduparc.prestweb.com/nevers/contact/contact/

merci

Ok je vois. Il y a un problème avec le nom des jours (variable me.dayOrder), mais je n'arrive pas à comprendre pourquoi.

Est-ce qu'une autre fonction JS change cette variable ?

Au pire vous pouvez changer les lignes suivantes :

for(i in me.dayOrder){
h += '<th>'+me.dayName[me.dayOrder[i]]+'</th>';
}

par

for(i=0; i<7; i++){
h += '<th>'+me.dayName[me.dayOrder[i]]+'</th>';
}

Vous serez certain que le calendrier n'affiche que 7 jours

Est-ce que modifier la ligne
for(i in me.dayOrder){

en

for(var i in me.dayOrder){

Règle le problème ?

c'est parfait, merci beaucoup !

Bonjour,

J'étais à la recherche d'un calendrier pas trop complexe pour un site que je suis en train de développer. Je pense avoir trouvé mon bonheur ici. Cependant n'étant pas forcément très compétant, je cherche à savoir comment faire pour que le calendrier soit affiché d'office (sans devoir appuyer sur le bouton "Calendrier").

Merci d'avance.

Bonsoir Eliatron,

Oui c'est possible. Regarde la deuxième partie de l'article, tu as un exemple de fonctionnement avec le calendrier qui s'affiche directement sans bouton.
- http://blog.niap3d.com/fr/4,10,news-9-jsSimpleDatePickr-calendrier-Javascript-2-2.html

J'ai également mis en ligne un configurateur :
- http://blog.niap3d.com/fr/4,10,news-42-Configurateur-de-calendrier-Javascript.html

Bonne intégration !

Bonjour,
merci pour le calendrier ça marche niquel !
Cependant j'aimerais avoir le retour de la date en format AAAA/MM/JJ et non JJ/MM/AAAA et je n'arrive pas à modifier le code pour y parvenir

Bonjour Antoine,

Deux solutions,

Soit convertir la date dans la fonction javascript qui est appellé au clic sur un jour, soit modifier la ligne 53 :
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>';


en
h += '<td class="'+(i==today ? me.classSelection:me.classTd)+'"><a href="#"'+(me.funcDateClic!='' ? ' onclick="'+me.funcDateClic+'(\''+year+'/'+(month+1)+'/'+i+'\', \''+me.id+'\');return false;"':'')+'>'+i+'</a></td>';

Et vous aurez des date au format AAAA/MM/JJ

Merci beaucoup Patrice ça marche parfaitement merci merci merci !!! :)

Enfaite j'ai encore en problème :s le code que vous m'avez passé fonctionne bien mais cependant quand je click sur le bouton calendrier le moi et l'année initiale sont affiché aléatoirement. Exemple nov 2020 a la place de la date d'aujourd hui

BOnjour Antoine,

Un exemple du code qui pose problème ?
C'est l'affichage de la date ou l'affichage du calendrier qui pose problème ?

C'est l'affichage initiale du moi et de l'année dans le calendrier.je sais pas si je m'exprime correctement :s

La date attendu à l'initialisation est au format JJ/MM/AAAA, c'est peut-être ça qui pose problème.

Bonjour,

J'aimerais utiliser votre code JavaScript dans un formulaire Acrobat pour faire apparaître le calendrier pour les choix de dates.

Savez-vous si cela est possible?
Merci d'avance.

Bonjour Pierre,

Je ne connait pas du tout Acrobat. Mais d'après ce document sur le site Adobe, ça semble possible :
- http://help.adobe.com/en_US/acrobat/X/pro/using/WS58a04a822e3e50102bd615109794195ff-7e03.w.html

Si vous testez, n'hésitez pas à poster le résultat de vos investigations, je suis curieux de savoir ;-)

Bonjour.
Bravo pour votre script ! il est parfait.

J'ai une demande particulière :
J'ai 2 calendriers sur la même page, l'un choisit une date de début et l'autre de fin.
Est-ce possible de faire en sorte que le second récupère la date du premier afin de partir de cette date ?
Merci...

Bonsoir,

Oui c'est possible.
Si vous avez deux champs de type input, il faut créer une fonction qui va chercher la valeur du champ 1 et modifier le champ 2. Pour la démo on appelle le champ 2 'dateFin'.

<script type="text/javascript">
//<![CDATA[
// on initialise l'objet
var dateObj = new jsSimpleDatePickr([IDENTIFIANT DU BLOC DIV]);
// on paramètre la fonction qui est appelé au clic
dateObj.funcDateClic = 'dateClic';
// ici les autres paramètres

function dateClic(dateStr){
var d = dateStr.split('/');
d = new Date(d[2], d[1], d[0]);
// ici vous pouvez modifier la date
// par exemple ajouter un jour, une semaine de plus, etc
document.getElementById('dateFin').value = d.getDate()+'/'+(d.getMonth()+1)+'/'+d.getFullYear();
}
//]]>
</script>

Merci de votre retour...
Par contre je n'aarive pas à les faire fonctionner.
J'ai 2 champs de ce type :

<input type="text" id="champ_date1" size="12" maxlength="10">

<input type="text" id="champ_date2" size="12" maxlength="10">

Si vous avez 1 minute...
De toute façon merci pour tou.

Bonjour,

Voici un code plus complet avec l'initialisation du calendrier.
La date de fin est calculé un jour après (ligne 54) :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Date</title>
<script type="text/javascript" src="jsSimpleDatePickr.js"></script>
</head>
<body>
<p><input type="text" name="date1" id="champ_date1" value="" /></p>
<div id="calMain">
<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>

<p><input type="text" name="date2" id="champ_date2" value="" /></p>

<script type="text/javascript">
//<![CDATA[
function calnit(){
dateObj.setDate(dateDebEl.value);
dateObj.show();
calShowTitle();
calendarWrapEl.style.display = "block";
}
function calToogle(){
if(calendarWrapEl.style.display == "block"){
calendarWrapEl.style.display = "none";
}else{
calnit();
}
}
function calMonthNav(val){
dateObj.setMonth(val);
dateObj.show();
calShowTitle();
}
function calYearNav(val){
dateObj.setYear(val);
dateObj.show();
calShowTitle();
}
// un jour a été cliqué
function calClick(dateStr){
var dateArr = dateStr.split('/');
// créer une date javascript
dateJS = new Date(dateArr[2], dateArr[1]-1, dateArr[0]);
// affiche la date de debut
dateDebEl.value = dateJS.getDate()+'/'+(dateJS.getMonth()+1)+'/'+dateJS.getFullYear();
// ajoute un jour à la date pour la date de fin
dateJS.setDate(dateJS.getDate()+1);
// affiche la date de fin
dateFinEl.value = dateJS.getDate()+'/'+(dateJS.getMonth()+1)+'/'+dateJS.getFullYear();
// masque le calendrier
calendarWrapEl.style.display = "none";
}
// affiche le titre dans le calendrier
function calShowTitle(){
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();
}
// crée l'objet jsSimpleDatePickr
var dateObj = new jsSimpleDatePickr('calendar');
dateObj.funcDateClic = 'calClick';
dateObj.classTable = 'calendar';
dateObj.classTd = 'day';
dateObj.classSelection = 'selectedDay';
// enreigstre quelques variables
dateDebEl = document.getElementById('champ_date1');
dateFinEl = document.getElementById('champ_date2');
calendarWrapEl = document.getElementById('calendarWrap');
calendarWrapEl.style.display = "none";
// ajoute un événement click sur le champ date1
dateDebEl.addEventListener("click", calnit, false);
//]]>
</script>
</body>
</html>


A copier-coller dans un fichier HTML et à mettre dans le même dossier que jsSimpleDatePickr.js

Bonjour,

Je vous propose une modification afin que le calendrier fonctionne sur les anciennes versions de IE < 9.
Le problème est dans la reconnaissance de l'objet "addEventListener" qui n'est pas compatible avec IE < 9 à la place il faut utiliser "attachEvent". Se qui donne le code ci-dessous :

// INCOMPATIBLE AVEC ANCIENNE VERSION DE IE
//if(btName=="") dateEl.addEventListener('click', function(){ calToogleFromField(fieldId); }, false);
//else h = '<input type="button" value="'+btName+'" onclick="calToogle('+jsSDPId+');" />';

// REMPLACE PAR
if(btName==""){
if(dateEl.addEventListener){ // all browsers except IE before version 9
dateEl.addEventListener("click", function(){ calToogleFromField(fieldId); }, false);
}else{
if(dateEl.attachEvent){ // IE before version 9
dateEl.attachEvent('onclick', function(){ calToogleFromField(fieldId); });}}
}else{
h = '<input type="button" value="'+btName+'" onclick="calToogle('+jsSDPId+');" />';
}

Enjoy ! Fred.

Bonne idée, merci.
C'est une modification à ajouter dans le fichier jsSimpleDatePickrInit.js

Bonjour, et merci pour ce code très bien fait. J'aimerais pouvoir sélectionner plusieurs date dans le calendrier. pour ca, je passer successivement les dates à une fonction qui les stocke dans un champs input (hidden) sous forme de chaine. Mais le problème c'est que je n'arrive pas à voir comment garder le style des dates sélectionnées, seule la dernière dte est en style selectedDay. Aurais-tu une idée.

Merci d'avance.

Bonjour LEVIONNOIS,

Je travailles sur une mise à jour du configurateur qui permettra de travailler avec différentes date et des sélection.

En attendant si tu préfère le faire il faut :

- modifier la façon dont les date sont enregistrés. Plutôt que les conserver en objet Date en faire un String :
me.dateSel = '';

- il faut changer la fonction me.setDate et enregistrer la date sous forme de String : me.dateSel += ' '+dateArr[2]+'/'+dateArr[1]+'/'+dateArr[0];

- il faut changer la fonction me.show et la ligne qui affiche la cellule :
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>';
il faut chercher dans le texte qui correspond à la date en cours :
h += '<td class="'+(me.dateSel.indexOf(year+'/'+month+'/'+i) !== -1 ? me.classSelection:me.classTd)+'"><a href="#"'+(me.funcDateClic!='' ? ' onclick="'+me.funcDateClic+'(\''+i+'/'+(month+1)+'/'+year+'\', \''+me.id+'\');return false;"':'')+'>'+i+'</a></td>';
false;"':'')+'>'+i+'</a></td>';

Voilà l'idée générale. A tester et corriger ;-)

Merci beaucoup, j'étais un peu partie là-dessus. Je vois à peu près le truc.

En tout cas. merci. J'y travaille.

En y repensant il faut aussi prévoir une fonction pour supprimer une date enregistrée.
Peut-être qu'un Array serait plus efficace qu'un String.

Bonjour Patrice merci pour ce beau programme de calendrier que tu as réalisés. Je voudrais en effet améliorer un tout petit peu ton programme pour l’adapter a mes besoins. En effet je voudrais pouvoir désactiver tous les jours, mois et années qui seront en dessous du jour actuelle. C’est-à-dire par exemple si la date du jour était le 09/09/2016 et que l’utilisateur voudrais entrer une date déjà passée par exemple le 05/09/2016, le programme ne lui permettrais pas. Voici un peu mon problème.
Merci d’avance pour ton aide cher Patrice

Bonjour Jean Philippe,

Pour obtenir ce que tu cherche il faut suivre cette méthode :
1) Définir une fonction au clic
2) Dans cette fonction, vérifier si la date est dans la sélection prévue.
Si oui -> OK
Si non -> modifier la date et l'objet

Voilà pour l'idée.

Pour la mise en pratique :

var calId = calInit("calendarMain", "", "calDate", "dateVerif", "M AAAA", "11", "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);

// date de début
var dateDebut = new Date(2016, 8, 1);
// date de fin
var dateFin = new Date(2016, 11, 31);

// vérifie si la date est comprise entre la date et dateFin
function dateVerif(dateStr){
var dateArr = dateStr.split('/');
var dateJS = new Date(dateArr[2], dateArr[1]-1, dateArr[0]);
if(dateJS >= dateDebut && dateJS <= dateFin) console.log("La date est correcte");
else console.log("La date n'est pas correcte !!");
}

Ne reste plus qu'à finaliser la fonction :-)

Merci beaucoup Patrice

Bonjour,

Je réalise un formulaire permettant d'effectuer des requêtes sans avoir besoin de développer. Le calendrier est vraiment top il colle parfaitement avec le design de la page.
Cependant, je n'arrive pas à récupérer la valeur d'une date sélectionnée lorsque celle-ci est antérieure à la date du jour.

Bonjour Math,

Un petit lien ou un bout de code pour voir comment le calendrier est inséré ?

La date est insérée dans un champ input ?

Salut Math c'est également le problème que je tente de résoudre, j'ai des erreurs mon code ne fonctionne toujours pas.

Postez des exemples de code que e puisse tester ;-)

(réponse à moi-même, j'en fais part à la communauté)

Comment masquer par défaut le calendrier :

Dans la partie html (php en ce qui me concerne) qui invoque le calendrier, commenter la ligne "calShow..", tout simplement :

echo '<div id="calendarMain'.$itemId.'" class="calendarMain"></div>
<script type="text/javascript">
//<![CDATA[
var calId = calInit("calendarMain'.$itemId.'", "[...]", "'.$nom.'", "", "M AAAA", "11", "jsCalendar", "day", "selectedDay", ["Jan.", "Fév.", "Mar.", "Avr.", "Mai", "Jun", "Jui.", "Aoû.", "Sep.", "Oct.", "Nov.", "Déc."], ["D", "L", "M", "M", "J", "V", "S"], false);
// Decommenter pour afficher par defaut:
// calShow(calId);
//]]>
';
</script>

Bonjour thy,

Merci.

Pour info une nouvelle version sera en ligne d'ici peu.

Bonjour, j'utilise votre librairie pour une page de formulaire d'inscription. Je rencontre un problème lorsque j'essaie de generer un nouveau calendrier apres click.
-soit les calendriers générés apreés click s'affichent mais ne fonctionnent pas,
-soit le dernier calendrier généré s'affiche et fonctionne et les calendrier précédents disparaissent.
Auriez-vous déja rencontré ce cas de figure? Si oui avez-vous trouvé une solution?
Merci d'avance pour votre aide
:)

Bonjour Nadia,

Pour utiliser lus calendrier il suffit de définir l'objet une fois et d'utiliser ensuite la fonction CalAdd pour ajouter autant de calendrier que vous souhaitez.
En oubliant pas de définir un champ différent pour chaque calendrier sinno ils vous tous utiliser le même champ.

<script>
var myCalendar = new jsSimpleDatePickr();
myCalendar.CalAdd({
'divId': 'calendarMain',
'inputFieldId': 'champA',
'dateCentury': 20,
'monthLst': ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
'dayLst': ['D', 'L', 'M', 'M', 'J', 'V', 'S'],

});
myCalendar.CalAdd({
'divId': 'calendarMain',
'inputFieldId': 'champB',
'dateCentury': 20,
'monthLst': ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
'dayLst': ['D', 'L', 'M', 'M', 'J', 'V', 'S'],

});
</script>

bsr a tous svp j'aimerai desactiver un jour de la semaine mais je n'y parviens pas. svp quelqu'un peut-il m'aider

Bonsoir,

Je viens d'intégrer jsSimpleDatePickr dans ma page html, mais j'ai un problème avec addEventListener de type "focus", voilà le bout du code :
[code]
<!doctype html>
<html lang="fr">
<head>
<link href="default_blue.css" rel="stylesheet"/>
<script type="text/javascript" src="jsSimpleDatePicker.js"></script>
</head>
<body>
<div id="calendarMain" class="calendarMain"></div>
<input type="text" id="_10" />
<input type="text" id="test" value="test" />
<script type="text/javascript">
var myCalendar = new jsSimpleDatePickr();

for(let i=0;i<document.getElementsByTagName('input').length;i++){
document.getElementsByTagName('input')[i]
.addEventListener('focus', function(e) {
inputId = this.id;
//myCalendar.jsSDPObj[0]["inputFieldId"]=inputId;
myCalendar.CalAdd({
'divId': 'calendarMain',
'inputFieldId':inputId,
'dateMask': 'JJ/MM/AAAA',
'dateCentury': 20,
'titleMask': 'M AAAA',
'navType': '01',
'classTable': 'jsCalendar',
'classDay': 'day',
'classDaySelected': 'selectedDay',
'monthLst': ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
'dayLst': ['D', 'L', 'M', 'M', 'J', 'V', 'S'],
'hideOnClick': true,
'showOnLaunch': false,
"callBack":function(date){console.log(' (callback) date :',date);}
});
console.log('(après) instance :',myCalendar.jsSDPObj[0]);
} );
}


</script>
</body>
</html>
[/code]

Bonjour Toufik,

Le problème c'est que le code ajoute un nouveau calendrier à chaque fois qu'un champ reçoit un événement focus.

Il faut ajouter les calendrier avant. et les afficher / masquer lors du focus.

Bonjour,
a un moment dans le .js il y'a ceci :
[code]
'dateSel': new Date(),
'dateDisp': new Date(),
[/code]
Je suppose que c'est ça qui fait que par défaut le widget démarre avec la date du jour ?
J'aimerai le modifier pour pouvoir changer la date de 'démarrage', mais je ne sait pas trop comment m'y prendre pour faire ça "proprement".
Je suis preneur de tuyaux.

Bonjour MiGaNuTs,

L'idée du calendrier est d'afficher la date du champs texte sélectionné. Ces deux variable servent juste à stocker les dates, elles ne sont pas initialisé à ce moment mais avec CalDateInit.

Donc le plus propre est de les initialiser avec CalDateInit

Il faudrait aussi utiliser la version plus récente :[url]https://blog.niap3d.com/fr/5,10,news-69-Calendrier-javascript-gratuit-jsSimpleDatePickr-v2.html[/url]