Implémentation du datepicker UI

**SpaceFrog** · 04/09/2014, 17h10

je suis reparti du code de l'autre post ...
j'ai rajouté les dépendance + une class "dp" sur les input puis , APRES leur insertion dans la page avec append j'applique le datepicker sur la class dp

et curieusement ça fonctionne ...

http://jsfiddle.net/8vgw16k3/18/

[edit]
correction de typo dans le code qui buggait le second input des lignes

**Zebulon777** · 05/09/2014, 09h06

LOL, ça fonctionne pas sur le code actuel, le calendrier n'apparait pas.
Je pense qu'il doit y avoir quelque chose dans mon code ou dans le HTML qui ne lui plait pas, car aucun des 2 calendriers que j'ai essayé de mettre en place ne fonctionnent !!!

Ps : ce n'est pas dans ces INPUT que j'ajoute le calendrier, mais dans un autre hors des boucles.

Est-ce que je pourrai t'envoyer l'appli pour que tu regardes quelle ânerie j'ai bien pu faire ?
Elle n'est pas (encore) très grosse, je commence.

**Zebulon777** · 05/09/2014, 10h13

Je viens même d'essayer celui-la : http://www.clickoninformatique.com/mesjquerys/# sans plus de succès.
C'est à n'y rien comprendre !!!

**SpaceFrog** · 05/09/2014, 10h26

je pense qu'il faut que tu remette en cause tes initialisations ...
Tout fonctionne dans mon exemple ..

**Zebulon777** · 05/09/2014, 10h33

Je crois que j'ai trouvé quelque chose : je pense qu'il y a 2 JS qui se tapent dessus.
Il doit y avoir le même nom de fonction dedans ou un truc du genre.
Je m'explique :

Si j'utilise "<script charset="utf-8" src="http://code.jquery.com/jquery.js"></script>", l'application fonctionne bien jusqu'au traitement du calendrier qui ne fonctionne pas.

Si j'utilise, par exemple "<script type="text/javascript" src="js/jquery-1.8.3.js"></script>", alors l'application ne fonctionne plus et je sors systématiquement en erreur impossible de lire le fichier XML en question, alors que le variable WFichier ("./FichiersXML/LFPN.xml") contient bien la bonne valeur :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
	$(document).ready( function(){
		$.ajax( {
			type: "GET",
			url: WFichier,
			dataType: "xml",
			error: function (jqXHR, textStatus, errorThrown) 
			{
				alert("Le fichier '" + WFichier + "' est introuvable." + G_CrLf + "Traitement impossible.")
				window.close();
			},
			success: function(xml) 
			{

Une idée de comment je pourrai m'en sortir ?

**danielhagnoul** · 07/09/2014, 23h43

Bonsoir

Attention à l'ordre des codes. "regional" et "setDefaults" en premier. Ensuite, la création du datepicker doit obligatoirement venir après l'insertion de l'input !

Sans la totalité de vos codes (HTML, CSS, JS et votre XML) impossible de tester et de corriger votre travail, voici un exemple qui fonctionne :

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
46
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
    <meta charset="utf-8">
    <title>Titre</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.0/themes/sunny/jquery-ui.css">
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>
    <script>
$( function(){
 
    $.datepicker.regional['fr'] = {
        closeText: 'Fermer',
        prevText: 'Précédent',
        nextText: 'Suivant',
        currentText: 'Aujourd\'hui',
        monthNames: ['Janvier','Février','Mars','Avril','Mai','Juin','Juillet','Août','Septembre','Octobre','Novembre','Décembre'],
        monthNamesShort: ['Janv.','Févr.','Mars','Avril','Mai','Juin','Juil.','Août','Sept.','Oct.','Nov.','Déc.'],
        dayNames: ['Dimanche','Lundi','Mardi','Mercredi','Jeudi','Vendredi','Samedi'],
        dayNamesShort: ['Dim.','Lun.','Mar.','Mer.','Jeu.','Ven.','Sam.'],
        dayNamesMin: ['D','L','M','M','J','V','S'],
        weekHeader: 'Sem.',
        dateFormat: 'dd/mm/yy',
        firstDay: 1,
        isRTL: false,
        showMonthAfterYear: false,
        yearSuffix: ''
    };
 
    $.datepicker.setDefaults( $.datepicker.regional['fr']);
 
    $( '<input type="text" id="datepicker" value="' + new Date().toLocaleDateString() + '">' ).appendTo( "#Cell_Date" );
 
    // La création du datepicker doit venir après l'insertion de l'input !
    $( "#datepicker" ).datepicker();
 
});
    </script>
    <style>
 
    </style>
</head>
<body>
    <div id="Cell_Date"></div>
</body>
</html>

Chaque ID doit être unique dans la page web.

**SpaceFrog** · 08/09/2014, 09h51

la création du datepicker doit obligatoirement venir après l'insertion de l'input !

Je pense que cela fais au moins 3 fois que l'on t'a dit cela !!!

**Zebulon777** · 08/09/2014, 15h26

C'est ce que j'ai fait et c'est d'ailleurs grâce à l'aide de Froggy que ça fonctionne impec avec www.clickoninformatique.com/mesjquerys/#

Mais impossible de faire fonctionner mon code avec le Datepicker...
Je suis bien convaincu que c'est moi qui me loupe quelque part, mais je ne vois pas du tout où (tralalaitou)

Si vous avez le courage, je vous envoie l'application, car effectivement, j'aimerai bien comprendre pourquoi l'un fonctionne et pas l'autre.

**Zebulon777** · 19/09/2014, 15h41

Bonjour à tous,

je me permets de relancer le sujet car je tourne en rond depuis un bon moment déjà et désolé si je me trompe de section, j'ai hésité entre Javascript et JQuery, mais comme ça concerne aussi le calendrier...
Bref...

Mon problème est sans doute très bête : impossible de lancer un traitement à la perte du focus sur le "onblur".

Je sélectionne ma date grâce au calendrier, de cette manière :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
...
<tr>
	<td>&nbsp;</td>
	<td >&nbsp;</td>
	<td width="30%" class="arrow_box Effet3D3" id="Cell_Date" align="center">
	<br/>Date : <input class="InputDATE Effet3D3" type="text" id="DateID" rel="" onblur="ControleDate()"/>
		<span class="mtt" title="$(selecteur).MyCalendrierPicker({icon:true});"><br/><br/></span>
	</td>
	<td >&nbsp;</td>
	<td>&nbsp;</td>
</tr>
...

La fonction de sélection de la date est appelée dans le Window_OnLoad :

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
 
function Window_onload() {
...
		SelectionDate();
...
}
 
function SelectionDate() {
// Affichage et sélection de la date
// Se fait dans DateID
	$(document).ready(function() {	
		$("#DateID").MyCalendrierPicker({icon:true});
		ObjIMG = document.getElementById("IconCal");
		ObjIMG.width = 40;
		ObjIMG.height = 40;
	});
}

La fonction ControleDate :

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
 
function ControleDate() {
	WControlePage = true;
	// Controle de la date
	WDateID = window.Form_STAGE.DateID.value;
	WDateJour00 = new Date();
	WDateJour01 = new Date(WDateJour00.getFullYear(), WDateJour00.getMonth(), WDateJour00.getDate());
	WDateSaisie = new Date(WDateID.substr(6,4), WDateID.substr(3,2)-1, WDateID.substr(0,2));
 
	if (WDateSaisie > WDateJour01)
	{
		WControlePage = false;
		alert("La date saisie ne peut pas être supérieure à la date du jour !");
		window.Form_STAGE.DateID.value = "";
		window.Form_STAGE.DateID.className = "InputINVALIDE InputDATE Effet3D3";
		window.Form_STAGE.DateID.focus();
	}
	else
	{
		window.Form_STAGE.DateID.className = "InputDATE Effet3D3";
// Si la date est valide => recherche si le fichier correspondant existe et chargement éventuel du fichier.
 
 
	};
 
	return WControlePage;
}

Le calendrier que j'utilise (le seul que j'ai réussit à faire fonctionner, j'avoue...

) est celui-là : http://www.clickoninformatique.com/mesjquerys/#

La fonction ControleDate ne semble pas s'exécuter et je pense que ça vient du fait que le champs DATEID ne prend jamais le focus à cause de ce calendrier.

Il faut pourtant que j'arrive à dire que la date est mauvaise soit à la sélection, soit en quittant le champ, comme je le fais déjà pour d'autres champs.

Voila, j'essaye de vous donner le maximum d'informations afin que vous puissiez m'aider.

Merci d'avance.

**Zebulon777** · 08/10/2014, 10h38

Bonjour à tous,

je relance suite à mon message précédent car je ne m'en sors pas : impossible de capturer un événement après la sélection de la date dans le calendrier.

Est-ce qu'il y aurait une bonne âme à qui je pourrai envoyer mon code pour qu'il me dise ce qui cloche ?

**Watilin** · 09/10/2014, 03h56

Bonsoir,

je viens de lire toute la conversation. Sans avoir examiné en détail le code (je le ferai demain, promis) je te propose l'artillerie lourde pour tenter de débusquer ton problème :

Le validateur HTML.
Le mode strict : demande à ta console d'afficher les warnings (je suppose que tu sais te servir de la console, sinon FAQ) et place la ligne "use strict"; au début de tes scripts ou fonctions. Essaye-le d'abord sur les fichiers entiers, et si ça casse ton script, mets-le seulement au début des fonctions que tu soupçonnes d'abriter le problème, en affinant petit à petit tu trouveras peut-être quelque chose.
Le débogueur pas-à-pas. Notamment sur la fonction $(document).ready ou équivalent, et aussi au moment où tu insères tes <input>. Tu ne trouveras peut-être pas le problème mais ça te donnera certainement une meilleure vision du déroulement chronologique de ton script.

**Watilin** · 10/10/2014, 04h42

Ok alors j'ai essayé d'assembler quelque chose avec les différents bouts de code que tu as posté dans le topic en essayant de prendre le plus récent… Faut avouer que c'est loin d'être clair.

Autant que tu postes la totalité de ton code au point où on en est, je crois que ça sera plus simple.

Faudra aussi que tu m'expliques tes conventions de nommage. Y'a des lettres qui traînent dans les noms de variables, notamment ce W qu'on retrouve partout, et puis des fois y'a des _ et des fois y'en a pas. Pas très cohérent tout ça.

Et après je pense qu'on va nettoyer un peu : les attributs HTML de présentation, cette <table> qui m'a l'air de n'être là que pour de la mise en page (elle m'a confié qu'elle n'était pas épanouie dans son travail), les fonctions ready/onload imbriquées, et puis ces bouts de code non-jQuery qui n'ont aucune raison de ne pas utiliser jQuery. Honnêtement, y'a du boulot.

**Zebulon777** · 10/10/2014, 08h51

Tout d'abord, un grand merci pour tes réponses et t'intéresser à mon souci.

Ensuite, je dois dire que j'ai finit par y arriver tout seul, juste hier : j'ai réussit à trouver où mettre le ".focus" dans un des fichiers .JS qui gèrent le calendrier, ainsi à chaque sélection d'une date dans le calendrier, le champs de saisie récupère le focus, ce qui permet ensuite tous les traitements OnBlur.

Donc, on peux dire que je n'avais pas fournit toutes les billes pour m'aider, désolé...

Effectivement, je me sers des tables pour faire de la mise en page, je trouve ça pratique.
Je mélange effectivement le Javascript et le JQuery tout simplement parce que c'est la toute première fois (tout doux...) que j'y touche, grâce au forum, donc ensuite j'essaye de me débrouiller par mes propres moyens.
Toutefois, je ne savais pas qu'il ne fallait pas mélanger (les flux... Du calme Zoul...) !

Je ne crois pas que je puisse utiliser le Validateur HTML car c'est une application locale qui n'utilise IE qu'en tant qu'interpréteur ; c'est une option qui a été prise par la boite et qui n'est pas discutable pour le moment, mais revers de la médaille, on est coincé avec IE car nous utilisons des ActiveX.
Quand au mode strict, j'ai été voir un peu ce que c'était, mais le temps va me manquer pour pousser plus les mes investigations / apprentissage ; on verra plus tard...

Il va être difficile de mettre tout le code en ligne sur le forum, mais, si tu le souhaites, je peux toujours te l'envoyer par mail (il va falloir que je me blinde pour recevoir les critiques

)

En ce qui concerne mon, code, c'est vrai qu'il n'est surement pas académique, je le reconnais bien volontiers, j'ai appris tout seul, sur le tas et sur le tard

et aussi (très) beaucoup grâce au forum.
CQFD !

**Watilin** · 10/10/2014, 15h30

Content que tu aies résolu ton problème

Je t'enverrai mon mail par PM.

L'un des intérêts des frameworks tels que jQuery est de fournir une interface uniforme pour tous les navigateurs. Pour ça il y a une bonne partie du code qui réécrit, arrange, bidouille, pour obtenir une syntaxe cohérente à la fin. Si tu connais la plateforme ciblée (en l'occurence IE), tu n'as pas besoin de toute cette partie du framework. Cela dit ce n'est pas forcément une bonne idée non plus de s'en débarasser, car la syntaxe est quand même agréable. Et puis, je ne crois pas que tu en ressortirais grandi d'avoir appris à coder spécifiquement pour IE

Le mode strict ne marche qu'à partir d'IE10, donc tu peux sans doute l'oublier.

Et ce n'est pas vraiment grave de mélanger le code jQuery et non-jQuery, c'est juste un souci de cohérence

Implémentation du datepicker UI [UI]

jQuery

Discussions similaires

Partager

Partager