IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

Implémentation du datepicker UI [UI]


Sujet :

jQuery

  1. #1
    Membre actif Avatar de Zebulon777
    Homme Profil pro
    Informaticien
    Inscrit en
    Février 2005
    Messages
    1 319
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 57
    Localisation : France, Essonne (Île de France)

    Informations professionnelles :
    Activité : Informaticien

    Informations forums :
    Inscription : Février 2005
    Messages : 1 319
    Points : 286
    Points
    286
    Par défaut Implémentation du datepicker UI
    Bonjour tout le monde,

    Je recherche un calendrier sympa permettant la saisie de date sous la forme JJ/MM/AAAA, et bien sur qui soit facilement intégrable dans des scripts existant.

    J'ai bien trouvé celui-ci : http://www.developpez.net/forums/d82...drier-v3-beta/, mais je n'arrive pas à l'intégrer à mon code.

    Le champs INPUT s'affiche bien, mais quand je clique dedans, rien ne se passe.
    Pourtant le j'ai bien ajouter le "mCalandar.js" à la fin de mon fichier HTML, avec mes autres includes.

    J'ai surement oublié de faire quelque chose, mais je ne vois pas quoi.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
    ObjDate.innerHTML = "<input type='text' class='mCalendar' value=''>";
    A moins que vous ayez un autre calendrier plus facile à exploiter à proposer ? Ou en JQUERY ?
    Zeb'...

  2. #2
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 637
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 637
    Points : 66 656
    Points
    66 656
    Billets dans le blog
    1
    Par défaut
    Vu qu'a priori tu utilise jquery ...
    Il existe plein de plugins de calendrier jquery
    en particulier celui de jquery UI ...http://jqueryui.com/datepicker/
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  3. #3
    Membre actif Avatar de Zebulon777
    Homme Profil pro
    Informaticien
    Inscrit en
    Février 2005
    Messages
    1 319
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 57
    Localisation : France, Essonne (Île de France)

    Informations professionnelles :
    Activité : Informaticien

    Informations forums :
    Inscription : Février 2005
    Messages : 1 319
    Points : 286
    Points
    286
    Par défaut
    Ha ouais, il est pas mal.
    Par contre, je n'arrive pas à trouver les ressources à ajouter ?
    Zeb'...

  4. #4
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 637
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 637
    Points : 66 656
    Points
    66 656
    Billets dans le blog
    1
    Par défaut
    Le lien vers le download builder
    qi te permet de selectionner les composants dont tu as besoin
    le calendrier se trouve dans les widgets date picker
    http://jqueryui.com/download/
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  5. #5
    Membre actif Avatar de Zebulon777
    Homme Profil pro
    Informaticien
    Inscrit en
    Février 2005
    Messages
    1 319
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 57
    Localisation : France, Essonne (Île de France)

    Informations professionnelles :
    Activité : Informaticien

    Informations forums :
    Inscription : Février 2005
    Messages : 1 319
    Points : 286
    Points
    286
    Par défaut
    Super, merci.
    Zeb'...

  6. #6
    Membre actif Avatar de Zebulon777
    Homme Profil pro
    Informaticien
    Inscrit en
    Février 2005
    Messages
    1 319
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 57
    Localisation : France, Essonne (Île de France)

    Informations professionnelles :
    Activité : Informaticien

    Informations forums :
    Inscription : Février 2005
    Messages : 1 319
    Points : 286
    Points
    286
    Par défaut
    Bon, je dois passer à côté de quelque chose, car je n'arrive çà l'intégré à mon code.
    A la fin du HTML :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
     
    ...
    ...
    ...
    <script charset="utf-8" src="http://code.jquery.com/jquery.js"></script>
    <script src="MesFonctions.js"></script> 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css">
    </body>
    </html>

    Et dans mon code :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
     
    $(xml).find('TERRAINS').each(
       function() {  
           var WCode_Terrain = $(this).attr('code_terrain');
           var WNom_Terrain = $(this).attr('nom_terrain');
    // Application de la classe pour le nom de l'aérodrome.	
           var ObjTerrain = document.getElementById("Cell_Terrain");
           ObjTerrain.className = "Effet3D1";
           Cell_Terrain.innerHTML = WNom_Terrain;
           var ObjDate = document.getElementById("Cell_Date");
           WDateJour = Date();
           $('#Cell_Date').append($("Date: <input type='text' id='datepicker'>"))
    })
    Où est-ce que je crotte ?

    Oulala, pas cool, même l'exemple ne fonctionne pas chez moi :
    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
     
    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>jQuery UI Datepicker - Default functionality</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css">
    <script>
    $(function() {
    $( "#datepicker" ).datepicker();
    });
    </script>
    </head>
    <body>
    <p>Date: <input type="text" id="datepicker"></p>
    </body>
    </html>
    Zeb'...

  7. #7
    Membre actif Avatar de Zebulon777
    Homme Profil pro
    Informaticien
    Inscrit en
    Février 2005
    Messages
    1 319
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 57
    Localisation : France, Essonne (Île de France)

    Informations professionnelles :
    Activité : Informaticien

    Informations forums :
    Inscription : Février 2005
    Messages : 1 319
    Points : 286
    Points
    286
    Par défaut
    Bon, c'est le caca, je ne m'en sors pas.

    Le HTLM
    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
     
    <style type="text/css">
    body {
    	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    	background-color: #7FBFFF;
    	margin: 0;
    	padding: 0;
    	color: #000;
    }
    </style>
    <link href="FeuilleStyleStage.css" rel="stylesheet" type="text/css" />
    <script src="jquery-ui-1.11.1.custom BLEU CLAIR/external/jquery/jquery.js"></script>
    <script src="jquery-ui-1.11.1.custom BLEU CLAIR/jquery-ui.js"></script>
    <script src="jquery-ui-1.11.1.custom BLEU CLAIR/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="jquery-ui-1.11.1.custom BLEU CLAIR/jquery-ui.css">
    </head>
     
    <body onload=Window_onload();>
    <form method="post" action="" name="Form_STAGE" id="Form_STAGE" enctype="multipart/form-data" >
    Le JS :
    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
     
    				$(xml).find('TERRAINS').each(
    				function() {  
    					var WCode_Terrain = $(this).attr('code_terrain');
    					var WNom_Terrain = $(this).attr('nom_terrain');
    					// Application de la classe pour le nom de l'aérodrome.	
    					var ObjTerrain = document.getElementById("Cell_Terrain");
    					ObjTerrain.className = "Effet3D1";
    					Cell_Terrain.innerHTML = WNom_Terrain;
    					var ObjDate = document.getElementById("Cell_Date");
    					WDateJour = Date();
     
    jQuery(document).ready(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']);
        $("#datepicker").datepicker();
    WLigne = "<input value='"+WDateJour+"' />";
    $('#Cell_Date').append($(WLigne));
    });
    Je ne vois pas ce qui ne va pas, mais j'ai rien de rien !
    Zeb'...

  8. #8
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 637
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 637
    Points : 66 656
    Points
    66 656
    Billets dans le blog
    1
    Par défaut
    en prenant exactement le code de ton exemple
    http://jsfiddle.net/89kdvu2u/
    pas de souci


    Par contre comme tu crées dynamiquement tes input avec jquery pense qu'au moment ou tu appliques le datepicker sur les élément, ils ne sont peur être pas encore créés
    Une solution simple : applique le datepicker au moment de la création

    Il existe d'autre possibilité, e particulier an passant par un plugin de DanielHagnoul qui est dans la FAQ ...
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  9. #9
    Membre actif Avatar de Zebulon777
    Homme Profil pro
    Informaticien
    Inscrit en
    Février 2005
    Messages
    1 319
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 57
    Localisation : France, Essonne (Île de France)

    Informations professionnelles :
    Activité : Informaticien

    Informations forums :
    Inscription : Février 2005
    Messages : 1 319
    Points : 286
    Points
    286
    Par défaut
    Impossible de trouver l'exemple de Datepicker de Daniel Hagnoul dans la FAQ

    Quoiqu'il en soit, je ne comprends pas pourquoi ça ne fonctionne pas ?

    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
     
    				$(xml).find('TERRAINS').each(
    				function() {  
    					var WCode_Terrain = $(this).attr('code_terrain');
    					var WNom_Terrain = $(this).attr('nom_terrain');
    					// Application de la classe pour le nom de l'aérodrome.	
    					var ObjTerrain = document.getElementById("Cell_Terrain");
    					ObjTerrain.className = "Effet3D1";
    					Cell_Terrain.innerHTML = WNom_Terrain;
    					var ObjDate = document.getElementById("Cell_Date");
    					WDateJour = Date();
     
    jQuery(document).ready(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']);
        $("#datepicker").datepicker();
    });
     
     
    					WLigne = "<input type='text' id='datepicker' value='"+WDateJour+"' />";
    					$('#Cell_Date').append($(WLigne));
    Zeb'...

  10. #10
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 637
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 637
    Points : 66 656
    Points
    66 656
    Billets dans le blog
    1
    Par défaut
    Parce que tu applique le datepicker Avant d'avoir mis l'input dans la page !!!


    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    $.datepicker.setDefaults($.datepicker.regional['fr']);
     
    });
     
     
    					WLigne = "<input type='text' id='datepicker' value='"+WDateJour+"' />";
    					$('#Cell_Date').append($(WLigne));
                                            $("#datepicker").datepicker(); // Si tu l'applique AVANT ton input n'est pas dans la page et ne sera pas impacté
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  11. #11
    Membre actif Avatar de Zebulon777
    Homme Profil pro
    Informaticien
    Inscrit en
    Février 2005
    Messages
    1 319
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 57
    Localisation : France, Essonne (Île de France)

    Informations professionnelles :
    Activité : Informaticien

    Informations forums :
    Inscription : Février 2005
    Messages : 1 319
    Points : 286
    Points
    286
    Par défaut
    LOL, mais c'est ce que je fais, ça ne fonctionne pas plus...
    Je m'arrache les cheveux, ma femme va raler

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    $(xml).find('TERRAINS').each(function() {  
    	var WCode_Terrain = $(this).attr('code_terrain');
    	var WNom_Terrain = $(this).attr('nom_terrain');
    	// Application de la classe pour le nom de l'aérodrome.	
    	var ObjTerrain = document.getElementById("Cell_Terrain");
    	ObjTerrain.className = "Effet3D1";
    	Cell_Terrain.innerHTML = WNom_Terrain;
    	var ObjDate = document.getElementById("Cell_Date");
    	WDateJour = Date();
    	$.datepicker.setDefaults($.datepicker.regional['fr']);
    	WLigne = "<input type='text' id='datepicker' value='"+WDateJour+"' />";
    	$('#Cell_Date').append($(WLigne));
    $("#datepicker").datepicker();
    })
    Zeb'...

  12. #12
    Membre actif Avatar de Zebulon777
    Homme Profil pro
    Informaticien
    Inscrit en
    Février 2005
    Messages
    1 319
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 57
    Localisation : France, Essonne (Île de France)

    Informations professionnelles :
    Activité : Informaticien

    Informations forums :
    Inscription : Février 2005
    Messages : 1 319
    Points : 286
    Points
    286
    Par défaut
    Dés que j'enlève les commentaires, ça plante :

    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
    success: function(xml){
    	$(xml).find('TERRAINS').each(
    	function() {  
    		var WCode_Terrain = $(this).attr('code_terrain');
    		var WNom_Terrain = $(this).attr('nom_terrain');
    		// Application de la classe pour le nom de l'aérodrome.	
    		var ObjTerrain = document.getElementById("Cell_Terrain");
    		ObjTerrain.className = "Effet3D1";
    		Cell_Terrain.innerHTML = WNom_Terrain;
    		var ObjDate = document.getElementById("Cell_Date");
    		WDateJour = Date();
    //jQuery(document).ready(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']);
    //});
    //    $("#datepicker").datepicker();
     
    	WLigne = "<input type='text' id='datepicker' value='"+WDateJour+"' />";
    	$('#Cell_Date').append($(WLigne));
    })
    Zeb'...

  13. #13
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 637
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 637
    Points : 66 656
    Points
    66 656
    Billets dans le blog
    1
    Par défaut
    tu crée des elements avec un id dans une boucle ...
    => tu auras plusieurs éléments avec le même id sur ta page !!! un id DOIT être unique sur la page

    mets lui plutot une class .datepicker ...

    puis après la boucle de création de tous les inputs
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    $(".datepicker").datepicker();
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  14. #14
    Membre actif Avatar de Zebulon777
    Homme Profil pro
    Informaticien
    Inscrit en
    Février 2005
    Messages
    1 319
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 57
    Localisation : France, Essonne (Île de France)

    Informations professionnelles :
    Activité : Informaticien

    Informations forums :
    Inscription : Février 2005
    Messages : 1 319
    Points : 286
    Points
    286
    Par défaut
    Ha oui, mince, je n'avais pas fait attention que j'étais dans la boucle.
    J'ai mal dormi cette nuit

    Mias bon, ça ne règle pas le problème de cette manière :

    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
    $(xml).find('TERRAINS').each(
    	function() {  
    		var WCode_Terrain = $(this).attr('code_terrain');
    		var WNom_Terrain = $(this).attr('nom_terrain');
    		// Application de la classe pour le nom de l'aérodrome.	
    		var ObjTerrain = document.getElementById("Cell_Terrain");
    		ObjTerrain.className = "Effet3D1";
    		Cell_Terrain.innerHTML = WNom_Terrain;
    	})
    	var ObjDate = document.getElementById("Cell_Date");
    	WDateJour = Date();
    	WLigne = "<input type='text' id='datepicker' value='"+WDateJour+"' />";
    	$('#Cell_Date').append($(WLigne));
    	$("#datepicker").datepicker();
    	var WIndex = 1;
    Zeb'...

  15. #15
    Membre actif Avatar de Zebulon777
    Homme Profil pro
    Informaticien
    Inscrit en
    Février 2005
    Messages
    1 319
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 57
    Localisation : France, Essonne (Île de France)

    Informations professionnelles :
    Activité : Informaticien

    Informations forums :
    Inscription : Février 2005
    Messages : 1 319
    Points : 286
    Points
    286
    Par défaut
    Bon, comme je ne m'en sors pas et que ça commence à me titiller fortement, j'ai décidé de refaire un essai avec http://www.developpez.net/forums/d82...drier-v3-beta/

    Et je me rend compte que j'ai pratiquement le même problème : si je clique dans la zone INPUT, rien ne se passe.
    J'ai bien ajouté <script src="mCalandar.js"></script> en tout dernier après tous mes autres includes, à la fin du body et ensuite j'applique bêtement le code :

    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
    success: function(xml) {
    	$(xml).find('TERRAINS').each(
    	function() {  
    		var WCode_Terrain = $(this).attr('code_terrain');
    		var WNom_Terrain = $(this).attr('nom_terrain');
    		// Application de la classe pour le nom de l'aérodrome.	
    		var ObjTerrain = document.getElementById("Cell_Terrain");
    		ObjTerrain.className = "Effet3D1";
    		Cell_Terrain.innerHTML = WNom_Terrain;
    	})
    	var ObjDate = document.getElementById("Cell_Date");
    	WDateJour = Date();
    	WLigne = "<input class='mCalendarFR' type='text' value='"+WDateJour+"' />";
    	$('#Cell_Date').append($(WLigne));
    	var WIndex = 1;
    	$(xml).find('SECTIONS').find('SECTION').each(function() {  
    ...
    C'est fou, que ce soit l'un ou l'autre, je dois surement passer à côté de quelque chose, mais je ne vois pas du tout ce que ça peut être...
    Zeb'...

  16. #16
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Points : 91 418
    Points
    91 418
    Billets dans le blog
    20
    Par défaut
    Pourtant, Spaffy t'a déjà expliqué ce qui ne va pas
    Citation Envoyé par SpaceFrog
    tu applique le datepicker Avant d'avoir mis l'input dans la page !!!
    et manifestement, tu n'affectes toujours pas le script du calendrier aux input créés...
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  17. #17
    Membre actif Avatar de Zebulon777
    Homme Profil pro
    Informaticien
    Inscrit en
    Février 2005
    Messages
    1 319
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 57
    Localisation : France, Essonne (Île de France)

    Informations professionnelles :
    Activité : Informaticien

    Informations forums :
    Inscription : Février 2005
    Messages : 1 319
    Points : 286
    Points
    286
    Par défaut
    Mais je l'ai changé ça, mais ça passe pas.

    Bah, je viens de tout relire, mais je capte pas, je butte, rien à faire.

    J'ai même essayé de tout mettre entièrement après les boucles et ça ne change rien :

    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
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
     
    function CreationPage(P_Terrain) {
    	WFichier = G_RepXML + G_TERRAIN + ".xml";
    	$(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) 
    			{
    				$(xml).find('TERRAINS').each(
    				function() {  
    					var WCode_Terrain = $(this).attr('code_terrain');
    					var WNom_Terrain = $(this).attr('nom_terrain');
    					// Application de la classe pour le nom de l'aérodrome.	
    					var ObjTerrain = document.getElementById("Cell_Terrain");
    					ObjTerrain.className = "Effet3D1";
    					Cell_Terrain.innerHTML = WNom_Terrain;
    				})
     
    				var WIndex = 1;
    				$(xml).find('SECTIONS').find('SECTION').each(
    				function() {  
    					var WNom_Section = $(this).attr('nom_section');
    					var WCell_Section = $(this).attr('cell_section');
    					//Création de la DIV dans la div DIVTAB_00
    					WDivTAB_00 = document.getElementById("DivTAB_00");
    					WNomDIV = "DivTAB" + WIndex;
    					WDiv = document.createElement("div");
    					WDiv.setAttribute("id", WNomDIV);
    					WDiv.setAttribute("class", "CSSTableGenerator");
    					WDiv.setAttribute("margin-bottom", "150px");
    					WDivTAB_00.appendChild(WDiv);
    					WDivID = document.getElementById(WNomDIV);
    					//Création de la table dans la DIV
    					WNomTAB = "Tab_Stage" + WIndex;
    					WTable = document.createElement("table");
    					WTable.setAttribute("id", WNomTAB);
    					WDivID.appendChild(WTable);
    					// Ajout d'un ligne à la table 
    					$('#'+WNomTAB).append($('<tr><td colspan="4">'+WNom_Section+"</td></tr>"));
     
    					$(this).find('ZONE_SAISIE:even').each(
    					function() {  
    						var WLib1 = $(this).find('LIB').text();
    						var WLib2 = $(this).next('ZONE_SAISIE').find('LIB').text();
    						var WElement1 = $(this).find('ELEMENT').text();
    						var WElement2 = $(this).next('ZONE_SAISIE').find('ELEMENT').text();
    						var WType1 = $(this).find('TYPE').text();
    						var WType3 = $(this).next('ZONE_SAISIE').find('TYPE').text();
    						var WSize1 = $(this).find('SIZE').text();
    						var WSize2 = $(this).next('ZONE_SAISIE').find('SIZE').text();
    						var WMax_Car1 = $(this).find('MAX_CAR').text();
    						var WMax_Car2 = $(this).next('ZONE_SAISIE').find('MAX_CAR').text();
    						var WInit1 = $(this).find('INIT').text();
    						var WInit2 = $(this).next('ZONE_SAISIE').find('INIT').text();
    						var WClasse1 = $(this).find('CLASSE').text();
    						var WClasse2 = $(this).next('ZONE_SAISIE').find('CLASSE').text();
    						WLigne = "<tr><td>";
    						WLigne = WLigne + WLib1 + "</td/><td><input value='"+WInit1+"' />";
    						WLigne = WLigne + "</td>";
    						WLigne = WLigne + "<td>";
    						WLigne = WLigne + WLib2 + "</td/><td><input value='"+WInit2+"' />";
    						WLigne = WLigne + "</td></tr>";
    						$('#'+WNomTAB).append($(WLigne));
    					})
    					WIndex = WIndex + 1;
    				})
     
    				var ObjDate = document.getElementById("Cell_Date");
    				WDateJour = Date();
    				WLigne = "<input type='text' id='datepicker' value='"+WDateJour+"' />";
    				$('#Cell_Date').append($(WLigne));
     
    jQuery(document).ready(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']);
    });
    $("#datepicker").datepicker();
     
     
    			} // FIN SUCCES
    		});
    	});
    }
    Au secours...
    Zeb'...

  18. #18
    Membre actif Avatar de Zebulon777
    Homme Profil pro
    Informaticien
    Inscrit en
    Février 2005
    Messages
    1 319
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 57
    Localisation : France, Essonne (Île de France)

    Informations professionnelles :
    Activité : Informaticien

    Informations forums :
    Inscription : Février 2005
    Messages : 1 319
    Points : 286
    Points
    286
    Par défaut
    C'est dingue, même ce code ne passe pas :

    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
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
     
    function CreationPage(P_Terrain) {
    	WFichier = G_RepXML + G_TERRAIN + ".xml";
    	$(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) 
    			{
    				$(xml).find('TERRAINS').each(
    				function() {  
    					var WCode_Terrain = $(this).attr('code_terrain');
    					var WNom_Terrain = $(this).attr('nom_terrain');
    					// Application de la classe pour le nom de l'aérodrome.	
    					var ObjTerrain = document.getElementById("Cell_Terrain");
    					ObjTerrain.className = "Effet3D1";
    					Cell_Terrain.innerHTML = WNom_Terrain;
    				})
     
    				var WIndex = 1;
    				$(xml).find('SECTIONS').find('SECTION').each(
    				function() {  
    					var WNom_Section = $(this).attr('nom_section');
    					var WCell_Section = $(this).attr('cell_section');
    					//Création de la DIV dans la div DIVTAB_00
    					WDivTAB_00 = document.getElementById("DivTAB_00");
    					WNomDIV = "DivTAB" + WIndex;
    					WDiv = document.createElement("div");
    					WDiv.setAttribute("id", WNomDIV);
    					WDiv.setAttribute("class", "CSSTableGenerator");
    					WDiv.setAttribute("margin-bottom", "150px");
    					WDivTAB_00.appendChild(WDiv);
    					WDivID = document.getElementById(WNomDIV);
    					//Création de la table dans la DIV
    					WNomTAB = "Tab_Stage" + WIndex;
    					WTable = document.createElement("table");
    					WTable.setAttribute("id", WNomTAB);
    					WDivID.appendChild(WTable);
    					// Ajout d'un ligne à la table 
    					$('#'+WNomTAB).append($('<tr><td colspan="4">'+WNom_Section+"</td></tr>"));
     
    					$(this).find('ZONE_SAISIE:even').each(
    					function() {  
    						var WLib1 = $(this).find('LIB').text();
    						var WLib2 = $(this).next('ZONE_SAISIE').find('LIB').text();
    						var WElement1 = $(this).find('ELEMENT').text();
    						var WElement2 = $(this).next('ZONE_SAISIE').find('ELEMENT').text();
    						var WType1 = $(this).find('TYPE').text();
    						var WType3 = $(this).next('ZONE_SAISIE').find('TYPE').text();
    						var WSize1 = $(this).find('SIZE').text();
    						var WSize2 = $(this).next('ZONE_SAISIE').find('SIZE').text();
    						var WMax_Car1 = $(this).find('MAX_CAR').text();
    						var WMax_Car2 = $(this).next('ZONE_SAISIE').find('MAX_CAR').text();
    						var WInit1 = $(this).find('INIT').text();
    						var WInit2 = $(this).next('ZONE_SAISIE').find('INIT').text();
    						var WClasse1 = $(this).find('CLASSE').text();
    						var WClasse2 = $(this).next('ZONE_SAISIE').find('CLASSE').text();
    						WLigne = "<tr><td>";
    						WLigne = WLigne + WLib1 + "</td/><td><input value='"+WInit1+"' />";
    						WLigne = WLigne + "</td>";
    						WLigne = WLigne + "<td>";
    						WLigne = WLigne + WLib2 + "</td/><td><input value='"+WInit2+"' />";
    						WLigne = WLigne + "</td></tr>";
    						$('#'+WNomTAB).append($(WLigne));
    					})
    					WIndex = WIndex + 1;
    				})
     
    				var ObjDate = document.getElementById("Cell_Date");
    				WDateJour = Date();
    				WLigne = "<input type='text' id='DateID' class'mCalendar' value='"+WDateJour+"' />";
    				$('#Cell_Date').append($(WLigne));
    			} // FIN SUCCES
    		});
    	});
    }
    L'input apparait bien, initialisé avec la date du jour, mais quand je clique dedans, le calendrier n'apparait pas.

    Il me vient une question : est-ce que ça ne pourrait pas venir du fait que l'input de date est dans une cellule de table ?
    Zeb'...

  19. #19
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 637
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 637
    Points : 66 656
    Points
    66 656
    Billets dans le blog
    1
    Par défaut
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    $('#Cell_Date').append($(WLigne));
    ton input arrive dasn ta page effectivement à cette ligne là ...

    je ne vois pas de datepicker juste après ...
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  20. #20
    Membre actif Avatar de Zebulon777
    Homme Profil pro
    Informaticien
    Inscrit en
    Février 2005
    Messages
    1 319
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 57
    Localisation : France, Essonne (Île de France)

    Informations professionnelles :
    Activité : Informaticien

    Informations forums :
    Inscription : Février 2005
    Messages : 1 319
    Points : 286
    Points
    286
    Par défaut
    Dans le dernier exemple, non puisque j'essaye à nouveau avec le calendrier V3, mais dans celui d'avant, il y est bien (sujet de 14h49).

    On dirait que le clique dans l'INPUT ne déclenche strictement rien.
    Zeb'...

+ Répondre à la discussion
Cette discussion est résolue.
Page 1 sur 2 12 DernièreDernière

Discussions similaires

  1. [UI] Datepicker & DOM : fonction mal implémentée ?
    Par tavarlindar dans le forum jQuery
    Réponses: 3
    Dernier message: 29/07/2012, 09h28
  2. Réponses: 8
    Dernier message: 04/06/2004, 09h13
  3. Moteur physique : comment l'implémenter ?
    Par haypo dans le forum Algorithmes et structures de données
    Réponses: 15
    Dernier message: 17/12/2003, 12h56
  4. Réponses: 2
    Dernier message: 06/07/2002, 12h36
  5. Implémentation des fonctions mathématiques
    Par mat.M dans le forum Mathématiques
    Réponses: 9
    Dernier message: 17/06/2002, 16h19

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo