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 :

sélectionner une date avec Datepicker


Sujet :

jQuery

  1. #1
    Membre Expert
    Avatar de laurentSc
    Homme Profil pro
    Webmaster débutant perpétuel !
    Inscrit en
    Octobre 2006
    Messages
    10 497
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 61
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant perpétuel !
    Secteur : Industrie

    Informations forums :
    Inscription : Octobre 2006
    Messages : 10 497
    Billets dans le blog
    1
    Par défaut sélectionner une date avec Datepicker
    Bonsoir,

    je compte utiliser Datepicker pour qu'un utilisateur puisse saisir une date ; or si j'arrive à afficher le calendrier (en français !), quand il sélectionne une date, celle-ci s'inscrit dans le champ de saisie, mais j'aimerais la récupérer pour la traiter (MySQL...) ; et j'ai beau regarder la doc, je ne trouve pas...

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 212
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 212
    Par défaut
    Bonsoir,
    ...celle-ci s'inscrit dans le champ de saisie, mais j'aimerais la récupérer pour la traiter...
    - récupération du contenu de façon tout à fait standard, pas nécéssaire si dans un formulaire, un NAME sur le contrôle suffit
    - envoi au serveur via FORM.submit ou via Ajax

  3. #3
    Membre Expert
    Avatar de laurentSc
    Homme Profil pro
    Webmaster débutant perpétuel !
    Inscrit en
    Octobre 2006
    Messages
    10 497
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 61
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant perpétuel !
    Secteur : Industrie

    Informations forums :
    Inscription : Octobre 2006
    Messages : 10 497
    Billets dans le blog
    1
    Par défaut
    Oui, tu as raison, ça a l'air très simple et pourtant, je n'y arrive pas. Au départ, le champ de saisie n'est pas dans un formulaire, mais je l'ai intégré dans un formulaire pour pouvoir accéder à ses éléments :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <div class="demo">
    <form name="formulaire">
      <p>Date: <input name="date" id="datepicker"
     type="text"></p>
    </form>
    </div>
    <script>
    vdate=document.forms["formulaire"].elements["date"].value;
    //if (vdate!='') 
    document.write('date='+vdate);
    et le document.write n'affiche que
    date=
    Qu'est-ce qui ne va pas ?

  4. #4
    Membre Expert
    Avatar de laurentSc
    Homme Profil pro
    Webmaster débutant perpétuel !
    Inscrit en
    Octobre 2006
    Messages
    10 497
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 61
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant perpétuel !
    Secteur : Industrie

    Informations forums :
    Inscription : Octobre 2006
    Messages : 10 497
    Billets dans le blog
    1
    Par défaut
    J'ai compris qu'il fallait utiliser la méthode "getDate" , mais je dois m'y prendre mal, vu que je n'ai rien :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    <div class="demo">
      <p>Date: <input name="date" id="datepicker" type="text"></p>
    </div>
     
    <!-- End demo -->
    <script>
    vdate=$( "#datepicker" ).datepicker( "getDate" );
    document.write('date='+vdate);

  5. #5
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 212
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 212
    Par défaut
    tel que ton code est écrit le résultat ne peut pas être autre, tu "affiches" le contenu de l'INPUT avant que celui ci n'ait été modifié.

  6. #6
    Membre Expert
    Avatar de laurentSc
    Homme Profil pro
    Webmaster débutant perpétuel !
    Inscrit en
    Octobre 2006
    Messages
    10 497
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 61
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant perpétuel !
    Secteur : Industrie

    Informations forums :
    Inscription : Octobre 2006
    Messages : 10 497
    Billets dans le blog
    1
    Par défaut
    D'accord, mais là :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
      <p>Date: <input name="date" id="datepicker" type="text" onchange="
    document.write('date='+$( \"#datepicker\" ).datepicker( \"getDate\" ));"></p>
    toujours pas...

  7. #7
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 212
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 212
    Par défaut
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <p>Date: <input name="date" id="datepicker" type="text" onchange="alert( 'date=' +$( '#datepicker').val());"></p>
    devrait suffire, ou mieux encore, dans ce cas
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <p>Date: <input name="date" id="datepicker" type="text" onchange="alert( 'date=' +this.value);"></p>

  8. #8
    Membre Expert
    Avatar de laurentSc
    Homme Profil pro
    Webmaster débutant perpétuel !
    Inscrit en
    Octobre 2006
    Messages
    10 497
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 61
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant perpétuel !
    Secteur : Industrie

    Informations forums :
    Inscription : Octobre 2006
    Messages : 10 497
    Billets dans le blog
    1
    Par défaut
    effectivement, comme ça, ça marche bien, par contre, je voudrais transmettre cette valeur au serveur afin de la stocker dans MySQL, et là, je n'ai pas d'idée ; aurais-tu une suggestion ?

  9. #9
    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 : 55
    Localisation : France, Gironde (Aquitaine)

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

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut

    Mais tu utilises un formulaire ! Il suffit juste de le soumettre !
    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

  10. #10
    Membre Expert
    Avatar de laurentSc
    Homme Profil pro
    Webmaster débutant perpétuel !
    Inscrit en
    Octobre 2006
    Messages
    10 497
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 61
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant perpétuel !
    Secteur : Industrie

    Informations forums :
    Inscription : Octobre 2006
    Messages : 10 497
    Billets dans le blog
    1
    Par défaut
    C'est effectivement tout simple...

  11. #11
    Futur Membre du Club
    Homme Profil pro
    Inscrit en
    Mars 2012
    Messages
    6
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Mars 2012
    Messages : 6
    Par défaut
    bonjours, je vois que vous avez reussi a mettre la date voulu dans le champs de texte. Mais je n'y arrive pas
    pouvez vous me montrer comment vous avez fait pour avoir une date qui sinscrit dans le format dd/mm/yy?

    voici la partie de mon code que j'ai pour ceci:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    dayClick: function(date, allDay, jsEvent, view) 
    					{
    						$('#calendar').fullCalendar('changeView','agendaDay');
    						$('#calendar').fullCalendar( 'gotoDate', date );
    						document.getElementById("Date").value = date;					
    					},
    voilà je voudrai que dans le champs qui s'appelle "Date" il y ai la date sous le format dd/mm/yy sachant que dans les option du calendar que j'utilise j'ai mit la ligne "dateFormat: 'dd/mm/yy',"
    Merci d'avance pour votre aide je suis en BTS et j'en ai besoin pour mon projet.

  12. #12
    Membre Expert
    Avatar de laurentSc
    Homme Profil pro
    Webmaster débutant perpétuel !
    Inscrit en
    Octobre 2006
    Messages
    10 497
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 61
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant perpétuel !
    Secteur : Industrie

    Informations forums :
    Inscription : Octobre 2006
    Messages : 10 497
    Billets dans le blog
    1
    Par défaut
    Le plus simple est que je te donne un code qui fait ce que tu souhaites, même s'il n'a rien à voir avec le tien :
    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
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
     
      <meta charset="UTF-8">
      <title>jQuery UI - Datepicker Demos &amp; Documentation</title>
      <link rel="stylesheet" href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css" type="text/css" media="all">
      <link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" media="all">
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
      <script src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js" type="text/javascript"></script>
      <script src="http://jquery-ui.googlecode.com/svn/tags/latest/external/jquery.bgiframe-2.1.2.js" type="text/javascript"></script>
      <script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/minified/i18n/jquery-ui-i18n.min.js" type="text/javascript"></script>
    </head>
     
     
    <body>
     
    <div id="demo-header">
    <h2>Datepicker</h2>
    <script type="text/javascript" src="jquery.ui.datepicker-fr.js"></script> </div>
     
    <script>
    $(function() {
    $( "#datepicker" ).datepicker();
    });
    </script>
     
    <p>Date: <input name="date" id="datepicker" onchange="alert( 'date=' +this.value);" type="text"></p>
     
    </body>
    </html>
    A mon avis, l'affichage dans le bon format se fait dans le js qui est fourni. D'ailleurs, il y a cette ligne : dateFormat: 'dd/mm/yy', dans jquery.ui.datepicker-fr.js (qui est téléchargeable ici)

  13. #13
    Futur Membre du Club
    Homme Profil pro
    Inscrit en
    Mars 2012
    Messages
    6
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Mars 2012
    Messages : 6
    Par défaut
    merci d'avoir répondu si rapidement.
    Mais le lien que tu m'a envoyé donne les ligne de code pour mettre le calendrier en Français. Mais mon problème est que je l'ai déjà mit en Fr...

    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
    <script type='text/javascript'>
    			$(document).ready(function() {
     
    			$('#calendar').fullCalendar({
     
     
    					header: {
    					left: 'month',
    					center:'title' ,
    					right: 'prev,next today'
    					},
    					firstDay: 1,
    					monthNames: ['Janvier','Février','Mars','Avril','Mai','Juin','Juillet','Août','Septembre','Octobre','Novembre','Décembre'],
    					monthNamesShort: ['Jan','Fev','Mar','Avr','Mai','Jui','Jul','Aou','Sep','Oct','Nov','Dec'],
    					dayNames: ['Dimanche','Lundi','Mardi','Mercredi','Jeudi','Vendredi','Samedi'],
    					dayNamesShort: ['Dim','Lun','Mar','Mer','Jeu','Ven','Sam'],
    					dayNamesMin: ['D','L','M','M','J','V','S'],
    					dateFormat: 'dd/mm/yy',
    					axisFormat : 'HH:mm',
    					allDayText: 'journ&eacutee',
    					minTime: 8,
    					maxTime: 20,
    					buttonText: {
    						prev: '&nbsp;◄&nbsp;',
    						next: '&nbsp;►&nbsp;',
    						prevYear: '&nbsp;&lt;&lt;&nbsp;',
    						nextYear: '&nbsp;&gt;&gt;&nbsp;',
    						today: "Aujourd'hui",
    						month: 'mois',
    						week: 'semaine',
    						day: 'jour'
    					},
    					titleFormat: {
    						month: 'MMM yyyy',
    						day: 'ddd d MMM  yyyy'
    					},
    					columnFormat: {
    						month: 'ddd',
    						day: 'ddd d/M'
    					},
    		 				dayClick: function(date, allDay, jsEvent, view) 
    					{
    						$('#calendar').fullCalendar('changeView','agendaDay');
    						$('#calendar').fullCalendar( 'gotoDate', date );
    						document.getElementById("Date").value = date;					
    					},
    				// add event name to title attribute on mouseover
    				eventMouseover: function(event, jsEvent, view) {
    					if (view.name !== 'agendaDay') {
    						$(jsEvent.target).attr('title', event.title);
    					}
    				}
    			});
     
    		});
        </script>

  14. #14
    Membre Expert
    Avatar de laurentSc
    Homme Profil pro
    Webmaster débutant perpétuel !
    Inscrit en
    Octobre 2006
    Messages
    10 497
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 61
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant perpétuel !
    Secteur : Industrie

    Informations forums :
    Inscription : Octobre 2006
    Messages : 10 497
    Billets dans le blog
    1
    Par défaut
    Si tu n'utilises pas l'icône "code" (le dièse, 2e icône à partir de la droite) pour afficher du code, tu vas te faire remonter les bretelles...
    et le code que tu montres n'a rien à voir avec Datepicker ; tu utilises quoi pour ton calendrier ?
    Et ds ce code, il y a dateFormat: 'dd/mm/yy', donc c'est déjà le format que tu souhaites ; ça ne marche pas ?

  15. #15
    Futur Membre du Club
    Homme Profil pro
    Inscrit en
    Mars 2012
    Messages
    6
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Mars 2012
    Messages : 6
    Par défaut
    a pardon je n'avait pas vu que je déranger avec le code afficher comme sa ^^'
    j'utilise fullcalendar http://arshaw.com/fullcalendar/docs/usage/

    et bien non bizarrement sa ne marche pas sa m'écrit le nom du jour du mois ect... et en ANGLAIS!!! alors que j'ai bien tout rempli en français...

  16. #16
    Membre Expert
    Avatar de laurentSc
    Homme Profil pro
    Webmaster débutant perpétuel !
    Inscrit en
    Octobre 2006
    Messages
    10 497
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 61
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant perpétuel !
    Secteur : Industrie

    Informations forums :
    Inscription : Octobre 2006
    Messages : 10 497
    Billets dans le blog
    1
    Par défaut
    je n'avait pas vu que je déranger avec le code afficher comme sa
    C'est vrai que c'est moins lisible et tes 2 posts précédents avec du code ont été modifiés par des modérateurs...

    Je n'ai rien vu dans la doc de fullcalendar concernant la langue ; c'est sûrement géré dans un fichier js...Si tu tiens au français, passe à Datepicker ; ici, j'ai mis le calendrier en français...

  17. #17
    Futur Membre du Club
    Homme Profil pro
    Inscrit en
    Mars 2012
    Messages
    6
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Mars 2012
    Messages : 6
    Par défaut
    oui datepicker est bien, mais il ne propose pas tout ce dont j'ai besoin. mon calendrier lorsque l'on clique dessus, il passe en mode agenda et il remplie la zone de saisie.
    C'est pour mon projet de fin d'année il faut ce mettre a la place du secrétaire qui lorsqu'il va cliqué sur une date, il verra dans le mode agenda le planning de la journée souhaité et ceci rempli automatiquement la zone de texte.
    Sinon il doit y avoir un moyen de traiter une variable comme un tableau? je peut essayer de faire une fonction qui traiterai la variable puis mettrai la date dans un format voulu^^'

  18. #18
    Membre Expert
    Avatar de laurentSc
    Homme Profil pro
    Webmaster débutant perpétuel !
    Inscrit en
    Octobre 2006
    Messages
    10 497
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 61
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant perpétuel !
    Secteur : Industrie

    Informations forums :
    Inscription : Octobre 2006
    Messages : 10 497
    Billets dans le blog
    1
    Par défaut
    Une idée où tu pourrais garder Datepicker (OK, c'est un peu compliqué, mais c'est faisable) : à chaque fois qu'un utilisateur saisit une date, on lance un éditeur de texte (j'ai déjà utilisé tinymce (c'est du PHP)), et le message est stocké dans une base MySQL (avec une table dont les champs seraient date/message/auteur). Pour faire tout ça, il faut être à l'aise en PHP...

  19. #19
    Futur Membre du Club
    Homme Profil pro
    Inscrit en
    Mars 2012
    Messages
    6
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Mars 2012
    Messages : 6
    Par défaut
    ok ok je réfléchirai à sa demain j'ai 4H de projet^^' la je me pose un peu parce que sa fait depuis la semaine dernière que je mit penche dessus alors bon sa commence a faire...
    Pour ce qui est du PHP au pire je serai en cour je suis la pour apprendre donc je verrai si il y a un moyen plus facile ou alors ta méthode.
    Merci pour ton aide et pour ta rapidité de réponse.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [Débutant] DatePicker - Changer le "Watermark" Sélectionner une date
    Par martialv02 dans le forum Windows Presentation Foundation
    Réponses: 3
    Dernier message: 02/06/2015, 12h31
  2. Réponses: 21
    Dernier message: 29/12/2012, 20h41
  3. Réponses: 6
    Dernier message: 06/11/2011, 12h11
  4. Parser une date avec un format
    Par titoine1978 dans le forum C++
    Réponses: 15
    Dernier message: 03/04/2006, 11h46
  5. [JCalendar] Sélectionner une date?
    Par Regis.C dans le forum Composants
    Réponses: 5
    Dernier message: 25/08/2005, 10h17

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