sélectionner une date avec Datepicker

**laurentSc** · 15/03/2012, 22h09

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

**NoSmoking** · 15/03/2012, 22h26

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

**laurentSc** · 15/03/2012, 23h15

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 ?

**laurentSc** · 16/03/2012, 09h24

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);

**NoSmoking** · 16/03/2012, 09h24

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

**laurentSc** · 16/03/2012, 10h19

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

**NoSmoking** · 16/03/2012, 10h47

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>

**laurentSc** · 16/03/2012, 10h59

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 ?

**Bovino** · 16/03/2012, 11h07

Mais tu utilises un formulaire ! Il suffit juste de le soumettre !

**laurentSc** · 16/03/2012, 11h28

C'est effectivement tout simple...

**turlute** · 19/03/2012, 09h07

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.

**laurentSc** · 19/03/2012, 09h38

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)

**turlute** · 19/03/2012, 10h16

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>

**laurentSc** · 19/03/2012, 10h54

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 ?

**turlute** · 19/03/2012, 13h27

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

**laurentSc** · 19/03/2012, 13h59

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

**turlute** · 19/03/2012, 16h07

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^^'

**laurentSc** · 19/03/2012, 16h29

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

**turlute** · 19/03/2012, 17h10

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.

sélectionner une date avec Datepicker

jQuery

Discussions similaires

Partager

Partager