Datepicker sur un TD

Version imprimable

bonjour à tous
je souhaite modifier en live le contenu d'un champ TD d'un tableau, grace au nouveau tag html5 "contenteditable". Ca fonctionne à merveille et avec un peu de Jquery je met à jour dynamiquement ma bdd. Lorsque le TD contient une date, j'aimerai afficher un datepicker comme celui de Jquery-UI qui fonctionne sur un champ input mais pas pour mon TD. Du coup au secours ... ci-après mon code simplifié qui me sert de test.
Code:

1 2 3 4 5 <head> <meta charset="utf-8"> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.ui.js"></script> <script>
Code:

1 2 3 4 5 6 7 8 9 10 11 12 $(document).ready(function() { $("td").click(function() { if( $(this).attr("contenteditable") == "true") { $(this).datepicker("show"); }; }); // -------------------------------- // pour vérifier que ca fonctionne avec un Input $("#test").datepicker(); // -------------------------------- });
Code:

1 2 3 4 5 6 7 8 9 10 11 12 </script> </head> <body> <br /><br /><br /> <input id="test"> test: </input> <table border="1"> <tr><td >-- DATE-1 --</td> <td >-- DATE-2 --</td></tr> <tr><td contenteditable="true" >xxx</td><td contenteditable="true" >zzz</td></tr> </table> </body> </html>

05/02/2014, 08h35
SpaceFrog

Quel est le comportemement ?

le calendrier s'ouvre-t-il sur le click, mais la valuer n'est pas changée dans td lors de la selection ?

Par defaut le datePicker modifie le value d'un input ... le td n'ayant pas de value

Il te faut donc utiliser une fonction personnelle sur la selection du datePicker pour venir modifier le innerHTML du td ...
05/02/2014, 09h29
regweb

Bonjour SpaceFrog,
merci pour cette info, je vais creuser ....

Suite ...
donc mon TD n'a pas de "value" mais un "text" que je récupère comme ceci.

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
$("td").click(function(){
	if( $(this).attr("contenteditable") == "true"){
		// data-idbase contient l'id de la BDD
		// data-nomchamp contient le nom du champ à modifier
		// data-nomtable contient le nom de la table concernée
		var contenu_avant = $(this).text();
		var idtable = $(this).data("idtable");
		var nomchamp = $(this).data("nomchamp");
		var nomtable = $(this).data("nomtable");
		$(this).blur(function(){
			var contenu_apres = $(this).text();
			// si le contenu du TD a changé
			if (contenu_avant != contenu_apres){
				parametres='idtable='+idtable+'&nomchamp='+nomchamp+'&contenu='+contenu_apres+'&nomtable='+nomtable ;
 
				$.ajax({
					url: "updatedynamique.php",
					type: "POST",
					data: parametres,
					success: function(html) {
						// alert("--OK--");
						$("#bt-popup").trigger("click");
					}
				});
			}
 
		});
	};
})

Je modifie en live mon TD qui contient par exemple du texte et au "blur" je transmets via ajax à mon script php pour mettre à jour ma bdd.
Ce que j'essaie de faire, si un TD contient une date, j'ouvre un datepicker. Il faut que je trouve un exemple de code que je pourrai déclencher via Jquery.
Merci d'avance pour vos retours.

06/02/2014, 08h40
SpaceFrog

il me semble que sur le click du td tu peux faire n show du datepicker non ?.
06/02/2014, 21h00
regweb

Bonjour,
j'ai testé plusieurs datepicker, sur un input = no problem.
Dans mon cas, niette ! le clic sur le TD n'ouvre pas le datepicker. :cry:
07/02/2014, 08h25
SpaceFrog

ce n'est pas son comportement par défaut et c'est normal !
Mais comme je te l'ai déja dit rien ne t’empêche de passer par le click du td pour faire un show du datePicker ...
11/02/2014, 22h02
regweb

j'utilise déjà le clic pour lire la date en cours, j'utilise donc le "trigger" pour déclencher l'affichage du datepicker mais je ne récupère pas de valeur de retour....j'abandonne. Ca me semble trop tordu.