sélectionner une date avec Datepicker

Version imprimable

15/03/2012, 22h09
laurentSc

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...
15/03/2012, 22h26
NoSmoking

Bonsoir,

Citation:

...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

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:

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

Citation:

date=

Qu'est-ce qui ne va pas ?

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:

1 2 3 4 5 6 7 8 <div class="demo"> <p>Date: <input name="date" id="datepicker" type="text"></p> </div>  <script> vdate=$( "#datepicker" ).datepicker( "getDate" ); document.write('date='+vdate);

16/03/2012, 09h24
NoSmoking

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é.

D'accord, mais là :

Code:

1
2
  <p>Date: <input name="date" id="datepicker" type="text" onchange="
document.write('date='+$( \"#datepicker\" ).datepicker( \"getDate\" ));"></p>

toujours pas...:cry:

16/03/2012, 10h47
NoSmoking

Code:

<p>Date: <input name="date" id="datepicker" type="text" onchange="alert( 'date=' +$( '#datepicker').val());"></p>

devrait suffire, ou mieux encore, dans ce cas

Code:

<p>Date: <input name="date" id="datepicker" type="text" onchange="alert( 'date=' +this.value);"></p>
16/03/2012, 10h59
laurentSc

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 ?
16/03/2012, 11h07
Bovino

:no:
Mais tu utilises un formulaire ! Il suffit juste de le soumettre !
16/03/2012, 11h28
laurentSc

C'est effectivement tout simple...

bonjours, je vois que vous avez reussi a mettre la date voulu dans le champs de texte. Mais je n'y arrive pas :cry:
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:

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.

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:

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)

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:

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>

19/03/2012, 10h54
laurentSc

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 ?
19/03/2012, 13h27
turlute

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...
19/03/2012, 13h59
laurentSc

Citation:

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...
19/03/2012, 16h07
turlute

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^^'
19/03/2012, 16h29
laurentSc

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/03/2012, 17h10
turlute

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. :ccool: