saisir une date avec Datepicker puis la convertir en ISO

**laurentSc** · 28/12/2012, 00h41

Bonsoir,

j'ai un formulaire qui permet de saisir une date puis souhaite la convertir en ISO afin de la stocker dans MYSQL et c'est là que ça ne va pas puisque la valeur retenue est sytématiquement la date d'origine du format UNIX :

Code :

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

1
2
3
4
5
6
7
$(function() {
$("#datepicker").datepicker();
});
$(function() {
$.datepicker.setDefaults($.datepicker.regional[""]); 
$( "#datepicker" ).datepicker( $.datepicker.regional[ "fr" ] );
});

Code html :

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

<input name="date" id="datepicker" type="text">

puis

Code php :

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

1
2
3
4
5
6
7
8
	public function setFrenchDate($date) {
		$dateintermediaire=explode("/",$date);
		$day=$dateintermediaire[0];
		$month=$dateintermediaire[1];
		$year=$dateintermediaire[2];
		$this->date=$year."/".$month."/".$day;//conversion fr->ISO (format bdd)
		return($this);
	}

qu'est-ce qui ne va pas ?

**danielhagnoul** · 28/12/2012, 13h53

Bonjour

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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<link href='http://fonts.googleapis.com/css?family=Sofia|Ubuntu:400|Kreon'>
	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/styles/dvjhRemBase.css">
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/overcast/jquery-ui.css">
	<style>
		/* TEST */
		#datepicker { width: 25rem; margin-right: 0.6rem; }
	</style>
</head>
<body>
	<h1>Forum jQuery</h1>
	<h2>Titre 2</h2>
	<section class="conteneur">
 
		<p>Date: <input type="text" id="datepicker" />
 
	</section>
	<footer itemscope itemtype="http://danielhagnoul.developpez.com/">
		<time datetime="2012-12-28T13:46:01.327+01:00" pubdate>2012-12-28T13:46:01.327+01:00</time>
		<span itemprop="name">Daniel Hagnoul</span>
		<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
		<a href="http://danielhagnoul.developpez.com/" itemprop="url">Mon cahier d’exercices</a>
		<a href="http://javascript.developpez.com/faq/jquery/" itemprop="url">FAQ</a>
		<a href="http://javascript.developpez.com/cours/?page=frameworks#jquery" itemprop="url">Tutoriels</a>
	</footer>
	<script src="http://danielhagnoul.developpez.com/lib/raphael-min.js"></script>
	<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/i18n/jquery-ui-i18n.min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
	<script charset="utf-8" src="http://danielhagnoul.developpez.com/lib/dvjh/base.js"></script>
	<script>	
		"use strict";
 
		$(function(){
 
			$.datepicker.setDefaults( $.datepicker.regional[ "fr" ] );
 
			$( "#datepicker" ).datepicker({
				showOn : "button",
				buttonImage : "http://danielhagnoul.developpez.com/images/calendar.gif",
				buttonImageOnly : true,
		        showWeeks : true,
		        changeMonth : true,
		        changeYear : true,
		        showButtonPanel : true,
		        minDate : "-3m -15d", // la date du jour - 3 mois et 15 jours
		        maxDate : "+1y +3m +15d", // la date du jour + 1 an 3 mois et 15 jours
		        onClose : function( dateStr, ObjPicker ){
                	if ( dateStr.length > 0 ){
 
                		/*
                		 * Solution 1 : formatDate
                		 */
                		/*
                		$( this ).val( // this est l'input
                			$.datepicker.formatDate( "yy-mm-dd", 
                				new Date( 
		                			dateStr.slice( 6 ), // yyyy
		                			parseInt( dateStr.slice( 3, 5 ), 10 ) - 1, // mm - 1
		                			parseInt( dateStr.slice( 0, 2 ), 10 )  // dd
		                		) 
		                	)
		                );
		                */
 
		                /*
		                 * Solution 2 : toISOString
		                 * 
		                 * Je n'aime pas cette solution pour les
		                 * raisons indiquées ici : 
		                 * http://www.developpez.net/forums/d974898/webmasters-developpement-web/contribuez/date-iso-8601-mal-traitee-navigateurs/
		                 */
		                /*
                		$( this ).val( 
                			new Date( 
		                			dateStr.slice( 6 ), // yyyy
		                			parseInt( dateStr.slice( 3, 5 ), 10 ) - 1, // mm - 1
		                			parseInt( dateStr.slice( 0, 2 ), 10 )  // dd
		                	).toISOString()
		                );
		                */
 
 
		                /*
		                 * Solution 3 : formatISO
		                 */
                		$( this ).val( 
                			new Date( 
		                			dateStr.slice( 6 ), // yyyy
		                			parseInt( dateStr.slice( 3, 5 ), 10 ) - 1, // mm - 1
		                			parseInt( dateStr.slice( 0, 2 ), 10 )  // dd
		                	).formatISO()
		                );
 
		               /* 
		                * Le code de formatISO() :
		                *
							Date.prototype.formatISO = function(){
								this._toLen2 = function(_nowStr){
									_nowStr = _nowStr.toString();				
									return ('0'+_nowStr).substr(-2,2);
								};
								this._nowFormat = 'aaaa-mm-jjThh:ii:ss.lllSzz:00';
								this._nowFormat = this._nowFormat.replace(/j+/, this._toLen2(this.getDate()));
								this._nowFormat = this._nowFormat.replace(/m+/, this._toLen2(this.getMonth()+1));
								this._nowFormat = this._nowFormat.replace(/a+/, this.getFullYear());
								this._nowFormat = this._nowFormat.replace(/h+/, this._toLen2(this.getHours()));
								this._nowFormat = this._nowFormat.replace(/i+/, this._toLen2(this.getMinutes()));
								this._nowFormat = this._nowFormat.replace(/s+/, this._toLen2(this.getSeconds()));
								this._nowFormat = this._nowFormat.replace(/l+/, this.getMilliseconds());
								this._nowFormat = this._nowFormat.replace(/S+/, (this.getTimezoneOffset() < 0) ? ("+") : ("-"));
								this._nowFormat = this._nowFormat.replace(/z+/, this._toLen2(Math.abs(this.getTimezoneOffset()/60)));
								return this._nowFormat;
							};
						*/	               
                	}
		        }
			});
 
		});
 
		$(window).load(function(){
 
		});
	</script>
</body>  
</html>

**laurentSc** · 28/12/2012, 14h45

Merci beaucoup de me proposer une solution, mais je n'arrive pas à l'adapter à mon besoin : car autant, il faut la convertir en ISO pour MySQL, autant, il faut continuer à l'afficher en FR dans le champ (pour l'utilisateur) et c'est ça que je n'arrive pas à faire.

**Bovino** · 28/12/2012, 16h57

Ce n'est certainement pas JavaScript qui va te servir à stocker quoi que ce soit dans MySQL !

Donc puisque tu as une fonction PHP qui fait le travail (dans ton premier message), tu cherches à faire quoi au juste ?

**laurentSc** · 28/12/2012, 18h16

Ce n'est certainement pas JavaScript qui va te servir à stocker quoi que ce soit dans MySQL !

Et pourtant, si...J'utilise Datepicker pour que l'utilisateur sélectionne une date via un formulaire et celle-ci est stockée dans MySQL dans l'action du formulaire ; donc, quand l'utilisateur sélectionne sa date, celle-ci doit être affichée en FR dans le champ, mais ensuite, dans l'action, celle-ci doit être convertie en ISO avant stockage. Or avec mon code actuel, il arrive que la date soit nulle, et du coup, ça m'affiche 01/01/1970 et le debug est difficile car si j'enlève la bufférisation de la sortie, Datepicker ne marche plus, donc les echo ou les var_dump, impossible...

Invité · 28/12/2012, 18h49

Bonjour Laurent,
voici comment je procède :

Code :

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

1
2
		<input id="idevent_Date1_en" name="event_Date1_en" type="hidden" />
		<input id="idevent_Date1" name="event_Date1" type="text" readonly="readonly" value="<?php echo $event_Date1; ?>" />

avec :

Code :

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

1
2
3
4
5
	/* DATEPICKER : sélection de date */
		$("#idevent_Date1").datepicker({ 
		dateFormat: 'DD dd MM yy', firstDay:1, minDate: new Date(),	// de la forme : Vendredi 27 Janvier 2012 
		altFormat: 'yy-mm-dd', altField: '#idevent_Date1_en'		// (champ caché) format yy-mm-dd (anglais)
		});

En clair :
1/ l'affichage donne "en clair" (visible) la date en français ;
2/ altFormat: => type=""hidden" : le champ au format anglais (enregistrable "tel quel" dans la BdD au format DATE)
3/ A toi d'imposer une date "non nulle" (existance)

**danielhagnoul** · 28/12/2012, 21h32

Envoyé par Bovino

Ce n'est certainement pas JavaScript qui va te servir à stocker quoi que ce soit dans MySQL !

Pour transmettre une information au serveur il faut une transaction AJAX !

**laurentSc** · 28/12/2012, 21h49

Mais pourtant, j'utilise souvent cette méthode des champs hidden et pour m'en assurer, j'ai fait le code suivant qui marche :

Code PHP :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title></title>
</head>
<body>
<form action="" method="post">
<input type="hidden" name="test" value="toto">
<INPUT TYPE="submit" NAME="nom" VALUE=" Envoyer ">
 
</form>
<?php if (isset($_POST['test'])) echo $_POST['test']; ?>
</body>
</html>

et sinon, tu n'as pas répondu à ma question :

Mais je ne vois rien ; c'est normal ?

**danielhagnoul** · 28/12/2012, 20h06

Envoyé par laurentSc

Merci beaucoup de me proposer une solution, mais je n'arrive pas à l'adapter à mon besoin : car autant, il faut la convertir en ISO pour MySQL, autant, il faut continuer à l'afficher en FR dans le champ (pour l'utilisateur) et c'est ça que je n'arrive pas à faire.

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
<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<link href='http://fonts.googleapis.com/css?family=Sofia|Ubuntu:400|Kreon'>
	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/styles/dvjhRemBase.css">
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/overcast/jquery-ui.css">
	<style>
		/* TEST */
		#datepicker { width: 25rem; margin-right: 0.6rem; }
	</style>
</head>
<body>
	<h1>Forum jQuery</h1>
	<h2>Titre 2</h2>
	<section class="conteneur">
 
		<p>Date: <input type="text" id="datepicker" />
 
	</section>
	<footer itemscope itemtype="http://danielhagnoul.developpez.com/">
		<time datetime="2012-12-28T13:46:01.327+01:00" pubdate>2012-12-28T13:46:01.327+01:00</time>
		<span itemprop="name">Daniel Hagnoul</span>
		<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
		<a href="http://danielhagnoul.developpez.com/" itemprop="url">Mon cahier d’exercices</a>
		<a href="http://javascript.developpez.com/faq/jquery/" itemprop="url">FAQ</a>
		<a href="http://javascript.developpez.com/cours/?page=frameworks#jquery" itemprop="url">Tutoriels</a>
	</footer>
	<script src="http://danielhagnoul.developpez.com/lib/raphael-min.js"></script>
	<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/i18n/jquery-ui-i18n.min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
	<script charset="utf-8" src="http://danielhagnoul.developpez.com/lib/dvjh/base.js"></script>
	<script>	
		"use strict";
 
		$(function(){
 
			$.datepicker.setDefaults( $.datepicker.regional[ "fr" ] );
 
			$( "#datepicker" ).datepicker({
				showOn : "button",
				buttonImage : "http://danielhagnoul.developpez.com/images/calendar.gif",
				buttonImageOnly : true,
		        showWeeks : true,
		        changeMonth : true,
		        changeYear : true,
		        showButtonPanel : true,
		        minDate : "-3m -15d", // la date du jour - 3 mois et 15 jours
		        maxDate : "+1y +3m +15d", // la date du jour + 1 an 3 mois et 15 jours
		        onClose : function( dateStr, ObjPicker ){
                	if ( dateStr.length > 0 ){
 
						/*
						 * Contiendra la date choisie au format ISO long.
						 * 
						 * A transmettre au serveur par une transaction AJAX
						 */
						var dateISOStr = new Date( 
							dateStr.slice( 6 ), // yyyy
							parseInt( dateStr.slice( 3, 5 ), 10 ) - 1, // mm - 1
							parseInt( dateStr.slice( 0, 2 ), 10 )  // dd
						).formatISO();
 
		               /* 
		                * Le code de formatISO() :
		                *
							Date.prototype.formatISO = function(){
								this._toLen2 = function(_nowStr){
									_nowStr = _nowStr.toString();				
									return ('0'+_nowStr).substr(-2,2);
								};
								this._nowFormat = 'aaaa-mm-jjThh:ii:ss.lllSzz:00';
								this._nowFormat = this._nowFormat.replace(/j+/, this._toLen2(this.getDate()));
								this._nowFormat = this._nowFormat.replace(/m+/, this._toLen2(this.getMonth()+1));
								this._nowFormat = this._nowFormat.replace(/a+/, this.getFullYear());
								this._nowFormat = this._nowFormat.replace(/h+/, this._toLen2(this.getHours()));
								this._nowFormat = this._nowFormat.replace(/i+/, this._toLen2(this.getMinutes()));
								this._nowFormat = this._nowFormat.replace(/s+/, this._toLen2(this.getSeconds()));
								this._nowFormat = this._nowFormat.replace(/l+/, this.getMilliseconds());
								this._nowFormat = this._nowFormat.replace(/S+/, (this.getTimezoneOffset() < 0) ? ("+") : ("-"));
								this._nowFormat = this._nowFormat.replace(/z+/, this._toLen2(Math.abs(this.getTimezoneOffset()/60)));
								return this._nowFormat;
							};
						*/	               
                	}
		        }
			});
 
		});
 
		$(window).load(function(){
 
		});
	</script>
</body>  
</html>

**laurentSc** · 28/12/2012, 21h08

Autant j'arrive à peu près à utiliser la solution de Daniel, autant je n'arrive pas avec celle de Jérôme (Quand je clique sur le champ, ça ne lance pas Datepicker). Mais quand même une question pour Daniel ; pour pouvoir utiliser la date saisie, j'ai placé le champ dans un formulaire :

Code html :

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

1
2
3
4
<form name="formulaire" method="post" action="">
Date: <input id="datepicker" name="date" type="text">
...
</form>

et plus loin, j'ai mis ce code :

Code php :

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

1
2
3
<?php
if (isset($_POST['date'])) echo "date=".$_POST['date'];
?>

Mais je ne vois rien ; c'est normal ?
Sinon, mon idée pour transmettre la valeur en ISO au serveur, c'est de la mettre dans un champ hidden de ce formulaire. Mais autant dans le post de 13h53, tu proposais 3 solutions, autant là, tu dis de le faire avec Ajax ; je peux utiliser une des 3 solutions ?

saisir une date avec Datepicker puis la convertir en ISO

jQuery

Vue hybride

Discussions similaires

Partager

Partager