Discussion :

[moimp]

Bonjour,
J'ai le code suivant:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
"use strict";
 
const mainForm = document.querySelector('form')
	, inputDates = mainForm.querySelectorAll("input[name*='_date']")
	;
 
var cal = new jsSimpleDatePickr()
	, inputId
	;
 
mainForm.call_date.focus(); // Par défaut
 
mainForm.source_date.addEventListener('focus', function(e) {
	inputId = mainForm.source_date.id;
}, false );
 
mainForm.request_date.addEventListener('focus', function(e) {
	inputId = mainForm.request_date.id;
}, false );
 
mainForm.offer_date.addEventListener('focus', function(e) {
	inputId = mainForm.offer_date.id;
	console.log('29: '+inputId);
}, false );
 
mainForm.call_date.addEventListener('focus', function(e) {
	inputId = mainForm.call_date.id;
	alert(inputId);
}, false );
 
console.log('31: '+inputId);

Dans ce code et dans la mesure où ma variable est déclarée avant les écouteurs, je ne comprends pas pourquoi la ligne 31 renvoie toujours undefined malgré le focus par défaut.
Remarques:
Le focus par défaut ligne 11 déclenche bien l'écouteur correspondant (ligne 26) avec affichage du nom du champ
La variable inputDates est prévue pour optimiser mon code, mais je ne vois pas comment.

[Marco46]

Les callbacks de tes écouteurs sont exécutés après la ligne 31.

Si tu initialises ta variable inputId avec 'toto' par exemple, tu verras qu'elle vaudra 'toto' à la ligne 31.

[javatwister]

Bonjour,

peut-être un problème lié au html, à la construction du formulaire?

[javatwister]

Oui, Marco46!

Les déclarations de variables sont traitées avant que le code soit exécuté, quel que soit leur emplacement dans le code

- https://developer.mozilla.org/fr/doc...structions/var

C'est valable pour les déclarations avec var, en tout cas;

[moimp]

Oui, vous m'avez appris quelque chose mais alors comment faire pour que la variable soit affectée par les écouteurs avant la suite du code et la fonction CalAdd ne doit être exécuté qu'une fois mais je dois juste mettre à jour le inputFieldId. Je vous donne le code entier:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
// Gestion du calendrier pour les champs dates
// http://blog.niap3d.com/jsSimpleDatePickr
// Nouvelle version 2.1
 
"use strict";
 
const mainForm = document.querySelector('form');
 
var cal = new jsSimpleDatePickr()
	, inputId
	;
 
mainForm.source_date.addEventListener('focus', function(e) {
	inputId = mainForm.source_date.id;
}, false );
 
mainForm.request_date.addEventListener('focus', function(e) {
	inputId = mainForm.request_date.id;
}, false );
 
mainForm.offer_date.addEventListener('focus', function(e) {
	inputId = mainForm.offer_date.id;
}, false );
 
mainForm.call_date.addEventListener('focus', function(e) {
	inputId = mainForm.call_date.id;
}, false );
 
//<![CDATA[
cal.CalAdd({
'divId': 'calendar',
'inputFieldId': inputId,
'dateMask': 'JJ/MM/AAAA',
'dateCentury': 20,
'titleMask': 'M AAAA',
'navType': '11',
'classTable': 'jsCalendar',
'classDay': 'day',
'classDaySelected': 'selectedDay',
'monthLst': fromPHPtoJS.monthes,
'dayLst': fromPHPtoJS.shortDays,
'hideOnClick': false,
'showOnLaunch': true
});
//]]>

La fonction CalAdd n'est pas de moi et dans cette fonction, je ne comprends pas à quoi correspondent //<![CDATA[ et //]]>.

[Toufik83]

Salut,

<![CDATA ]]> pour isoler un script du reste de la page. Les plus vieux navigateurs avaient effectivement tendance à parser les symboles < et > des codes javascript comme des balises, ce qui provoquait des erreurs et a poussé à utiliser des commentaires standards HTML <!-- --> à l'intérieur des balises <script>, et surtout pas <![CDATA ]]>.

En revanche il faut utiliser <![CDATA ]]>dans un document XML contenant du Javascript. C'est le cas des pages XHTML servies avec un content-type application xhtml/xml (qui sont très rares car la spécification HTML5 a fait concurrence avec XHTML1.1 auprès des utilisateurs, et car les versions d'Internet Explorer disponibles à l'époque du XHTML n'étaient pas capable de parser un document HTML servi en XML).

Concernant l'utilisation multiple de jsSimpleDatePickr, j'ai bien cherché sur google pour trouver au moins une bonne documentation, mais sans succès...

Dans l'exemple ci-dessous, on met un seul conteneur pour plusieurs input, puis on modifie le paramètre inputFieldId de l'objet myCalendar.jsSDPObj[0] lors de focus et après on appelle la fonction CalDoFromField :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
 
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8" />
	<title>Simple Date Picker</title>
	<link href="https://blog.niap3d.com/calendrier-javascript/css/default_blue.css" rel="stylesheet"/>
	<script type="text/javascript"  src="https://blog.niap3d.com/calendrier-javascript/js/jsSimpleDatePickr.2.11.js"!></script>
</head>
<body>
	<form id="myForm">
		<input name="source_date" id="source_date" class="date" />
		<input name="request_date" id="request_date" class="date"  />
		<input name="offer_date" id="offer_date" class="date" />
		<input name="call_date" id="call_date" class="date" />
	</form>
 
	<div id="calendar-wrapper" class="calendarMain"></div>
 
	<script type="text/javascript">
                var myCalendar= new jsSimpleDatePickr()
                ,inputId
                ,mainForm = document.querySelector('form')
                ,inputs=document.forms[mainForm.id].getElementsByClassName('date');
                for(let i=0;i<inputs.length;i++){
                        inputs[i].addEventListener('focus',function(e){
                                inputId = this.id;
                                myCalendar.jsSDPObj[0]["inputFieldId"]=inputId;
                                myCalendar.CalDoFromField(inputId,"toogle");//passer le inputId en paramètre + le paramètre "toogle" ==> affiche/masque le datepicker
                                console.log('jsSDPObj :',myCalendar.jsSDPObj[0],', inputId :',inputId);
                        },false);
                }
                myCalendar.CalAdd({
                        'divId': "calendar-wrapper",
                        'inputFieldId':"source_date",//par défaut
                        '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);}
                });
 
        </script>
</body>
</html>

Le seul problème qui te reste, c'est de positionner le conteneur #calendar-wrapper en dessus/dessous de l'input concerné, et ça je pense que tu peux le faire avec javascript...

[danielhagnoul]

[...]
Concernant l'utilisation multiple de jsSimpleDatePickr, j'ai bien cherché sur google pour trouver au moins une bonne documentation, mais sans succès...
[...]

Je n'ai rien trouvé de plus récent que :

2017 : https://blog.niap3d.com/calendrier-javascript/
2014 : https://blog.niap3d.com/fr/4,10,news...t-gratuit.html

[moimp]

Il reste encore deux points à régler, mais ton code correspond à ce que j'avais imaginé mais avais été incapable de réaliser. J'étais déjà entré dans le code du datepicker sans être capable de bien l'utiliser. Donc déjà un premier grand merci. J'ai modifié quelques lignes et paramètres pour m'adapter à ma configuration et avoir un affichage permanent.
Il reste deux défauts:

• Lorsque je clique sur le premier champ (qu'il soit ou non le champ par défaut), le calendrier disparaît malgré le paramètre 'show' de CalDoFromField().
• La date s'initialise toujours au 20 juin 1908. Elle devrait s'initialiser, soit à la date du jour lorsque le champ est vide, soit à la valeur du champ lorsqu'il y en une.

Il semblerait que le problème réside entre les lignes 71, 72 et 83 et la fonction CalDateInit mais je n'arrive pas à résoudre le problème.
Pour info, j'ai suggéré à deux reprises à l'auteur d'établir une documentation ( voir son blog )
Dans des configurations plus classiques, j'utilise régulièrement sans difficultés ce datepicker depuis 2017.