Datepicker sur un TD

**regweb** · 04/02/2014, 20h38

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 html :

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

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 :

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

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 html :

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

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>

**SpaceFrog** · 05/02/2014, 08h35

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

**regweb** · 05/02/2014, 09h29

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

**regweb** · 05/02/2014, 21h33

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

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
$("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.

**SpaceFrog** · 06/02/2014, 08h40

il me semble que sur le click du td tu peux faire n show du datepicker non ?.

**regweb** · 06/02/2014, 21h00

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.

**SpaceFrog** · 07/02/2014, 08h25

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

**regweb** · 11/02/2014, 22h02

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.

Datepicker sur un TD [UI]

jQuery

Discussions similaires

Partager

Partager