UI Datepicker : afficher le jour de semaine dans un div

Version imprimable

04/12/2010, 17h12
flyoman

UI Datepicker : afficher le jour de semaine dans un div
Bonjour à tous !

j'aurai (encore une fois) besoin de tous vos talents en jquery :)

alors pour expliquer vite fait, j'ai intégré un datepicker dans un input qui marche très bien et qui m'affiche la date sous ce format "05 décembre 2010"

le souci arrive quand je ferme mon datepicker je veux afficher dans un div en dessous le jour de la semaine (par exemple dimanche pr le 05/12/10) qui correspond. pour cela j'ai fais :
Code:

1 2 3 onClose: function(selectedDate) { $("#mondiv").html(formatDate('DD',selectedDate)); }
bon evidement ce code ne marche pas, par contre en mettant juste :

Code:

$("#mondiv").html(selectedDate);

je récupère bien la date mais évidement pas dans le format que je veux.

à vrai dire je sais pas trop par ou attaquer le probleme ?! je pense qu'il faut parser/changer le format de la date sélectionner puis l'afficher ensuite nan ? y a des fonctions de datepicker qui font ça mais je sais pas si elles s'appliquent dans ce cas du coup ?

je me sert de la démo ici :

http://jqueryui.com/demos/datepicker/event-search.html

qui récupère la date pour changer un autre datepicker mais bon c'est juste pour avoir une idée du truc.

voila si quelqu'un a une ébauche d'idée ça serait top :mrgreen:

merci beaucoup !
04/12/2010, 19h05
lemirandais
Je t'inviterais à relire la doc:
Code:

1 2 3 $(function() { $( "#datepicker" ).datepicker(); });
où l'idée de ton div est #datapicker ==> http://jqueryui.com/demos/datepicker/

lemirandais
04/12/2010, 19h14
flyoman
salut,

merci pour ta réponse mais je ne comprends pas trop :mouarf:

en fait j'appelle mon datepicker dans un input et je veux afficher le jour de semaine dans un div séparé, mon code :
Code:

1 2 3 4 5 6 7 $("input#date").datepicker({ onClose: function(dateText, inst) { var jourSemaine = $.datepicker.formatDate('dd', dateText); $("#mondiv").html(jourSemaine); } });
bon le code ne marche pas mais je voudrais afficher dans "mondiv" le jour (ex: lundi) et dans l'input j'affiche "10/10/2010".
je sais pas si je suis trop clair lol
04/12/2010, 19h20
lemirandais
tu met l'id dans l'input et ensuite tu fait un:
Code:

1 2 3 4 $("#id_input").change(function(){ var variable=$("#id_input").val(); //recupère la valeur choisit grâce au datepicker $("#divdetonchoix").html(variable); });
En gros, tu mets l'#datepicker dans l'input. Et ensuite, tu récupères la valeur et tu l'affiches dans le div de ton choix.

lemirandais
04/12/2010, 19h25
flyoman

ok merci mais en fait mon souci vient plus du fait que je n'arrive pas à transformer la valeur "10/10/2010" en "dimanche" par exemple.

car là j'affiche bien quelque chose dans mon div mais ce que je veux afficher est différent de la valeur de l'input ! c'est pour faire la transfo que ça bloque :oops:

je sais pas si tu aurais une idée ? je pense pas que je puisse récupérer les fonctions dateformat du datepicker ?

merci !
04/12/2010, 20h23
lemirandais

Oki, tu veux en gros récupérer le nom du jour à partir de la date sélectionner dans le datepicker.
Je pense que la seule solution est de faire une action avec ajax.
En gros, tu récupère comme je t'ai dit plus tôt la valeur de ce input et tu l'envoies, grâce à la fonction $.ajax() de jquery à un script php que tu devras créés et ainsi retourner le nom du jour.
Et après, afficher cette valeur où tu le souhaites grâce à la fonction html().

lemirandais
04/12/2010, 21h15
flyoman

ouaip c'est ça !
ok merci, un peu lourd comme systeme mais je vais essayer ça alors !

je pensais que ça pouvait se faire directement en jquery, j'ai farfouillé dans la doc mais apparement y a rien qui permet de trouver le nom du jour en fonction de la date. dans les paramètres du datepicker j'ai pas trouvé de truc équivalent à part le altfield mais qui ne s'applique pas ici

si jamais y a une autre solution je prends aussi :lol:

Bonsoir

Voici un exemple.

Nota Bene : Si vous changez le format de la date (dateFormat: 'dd-mm-yy',) il faut bien entendu adapter le code de la méthode "onClose" :

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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!doctype html>
<html lang="fr">
<head>
	<meta http-equiv="X-UA-Compatible" content="chrome=1">
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<link rel="stylesheet" type="text/css" href="../lib/jqueryui/css/humanity/jquery-ui-1.8.6.custom.css">	
	<style>
		body { background-color:#dcdcdc; color:#000000; font-family:sans-serif; font-size:medium; font-style:normal;
		font-weight:normal; line-height:normal; letter-spacing:normal; }
		h1,h2,h3,h4,h5 { font-family:serif; }
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img { margin:0px; padding:0px; }
		h1 { font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
		p { padding:6px; }
		div#conteneur { width:95%; min-width:800px; min-height:500px; margin:12px auto; background-color:#FFFFFF;
		color:#000000; border:1px solid #666666; }
 
		/* Test */
	</style>
</head>
<body>
	<h1>Forum jQuery</h1>
	<div id="conteneur">
 
<div>
	<input id="date" type="text" />
	<p id="jour" type="text"></p>
</div>
 
	</div>
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
	<script charset="utf-8" src="../lib/jqueryui/js/jquery-ui-1.8.6.custom.min.js"></script>
	<script>
		$(function(){
 
/* French initialisation for the jQuery UI date picker plugin. */
/* Written by Keith Wood (kbwood{at}iinet.com.au) and Stéphane Nahmani (sholby@sholby.net). */
$.datepicker.regional['fr'] = {
	closeText: 'Fermer',
	prevText: '&#x3c;Préc',
	nextText: 'Suiv&#x3e;',
	currentText: 'Courant',
	monthNames: ['Janvier','Février','Mars','Avril','Mai','Juin',
	'Juillet','Août','Septembre','Octobre','Novembre','Décembre'],
	monthNamesShort: ['Jan','Fév','Mar','Avr','Mai','Jun',
	'Jul','Aoû','Sep','Oct','Nov','Déc'],
	dayNames: ['Dimanche','Lundi','Mardi','Mercredi','Jeudi','Vendredi','Samedi'],
	dayNamesShort: ['Dim','Lun','Mar','Mer','Jeu','Ven','Sam'],
	dayNamesMin: ['Di','Lu','Ma','Me','Je','Ve','Sa'],
	weekHeader: 'Sm',
	dateFormat: 'dd-mm-yy',
	firstDay: 1,
	isRTL: false,
	showMonthAfterYear: false,
	yearSuffix: ''
};
 
$.datepicker.setDefaults($.datepicker.regional['fr']);
 
$('#date').datepicker({
	"onClose": function(dateText, inst){
		var tabDate = dateText.split("-"),
			year = tabDate[2],
			month = parseInt(tabDate[1], 10) - 1,
			day = parseInt(tabDate[0], 10),
			date = new Date(year, month, day);
 
		//console.log(date.getDay());
 
		$("#jour").text($.datepicker.regional['fr'].dayNamesShort[date.getDay()]);
	}
});
		});
	</script>
</body>  
</html>

05/12/2010, 15h37
flyoman

Nickel super ça marche merci bien :D
je l'ai adapté à ma sauce et ça a l'air de rouler !!

le principe est pas sorcier en plus !

encore merci :D