UI Datepicker : afficher le jour de semaine dans un div

**flyoman** · 04/12/2010, 17h12

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 :

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

1
2
3
onClose: function(selectedDate) {
$("#mondiv").html(formatDate('DD',selectedDate));
}

bon evidement ce code ne marche pas, par contre en mettant juste :

Code :

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

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

merci beaucoup !

**lemirandais** · 04/12/2010, 19h05

Je t'inviterais à relire la doc:

Code :

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

1
2
3
$(function() {
	$( "#datepicker" ).datepicker();
});

où l'idée de ton div est #datapicker ==> http://jqueryui.com/demos/datepicker/

lemirandais

**flyoman** · 04/12/2010, 19h14

salut,

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

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 :

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

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

**lemirandais** · 04/12/2010, 19h20

tu met l'id dans l'input et ensuite tu fait un:

Code :

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

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

**flyoman** · 04/12/2010, 19h25

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

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

merci !

**lemirandais** · 04/12/2010, 20h23

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

**flyoman** · 04/12/2010, 21h15

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

**danielhagnoul** · 04/12/2010, 23h16

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 :

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

**flyoman** · 05/12/2010, 15h37

Nickel super ça marche merci bien

je l'ai adapté à ma sauce et ça a l'air de rouler !!

le principe est pas sorcier en plus !

encore merci

UI Datepicker : afficher le jour de semaine dans un div

jQuery

Discussions similaires

Partager

Partager