UI Datepicker et les liens

kate59 · 25/06/2011, 23h06

Bonjour,

j'ai installer un calendrier jquery comme ici "http://jqueryui.com/themeroller/" sur ma page d'acceuil et j'ai juste modifier la ligne sur le fichier : jquery-ui-1.8.12.custom.min

(ligne 89)

Code :

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

1
2
<a class="ui-state-default'+(q.getTime()==b.getTime()?" ui-state-highlight":"")+(q.getTime()==u.getTime()?" ui-state-active":"")+(C?" ui-priority-secondary":"")+'" href="frontend/modules/activite/views/Liste_activite.php?date_activite='+q.getFullYe
..

Quand je passe maintenant sur le les jours du calendrier, nikel l'adresse est celle-ci mais quand je clic rien ne se passe, il ne charge pas la page.

en cherchant on me dite que onselect serait un moyen mais je n'ai rien trouver.

Comment faire?

voci comment j'ai isntaller datepicker:

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
<script type="text/javascript">
			$(function(){
 
				// Datepicker
				$('#datepicker').datepicker({
					inline: true
				});
 
 
 
			});
		</script>
<body>
  <div id="datepicker"></div>
</body>

MERCI. :o

kate59 · 26/06/2011, 11h44

bonjour,

grace a un ancien post j'ai reussi a recupeer la date selectionner et l'afficher dans un input mais j'aimerai renvoyer vers une autre page pour la recuperer, c est a dire il clic sur une date et il est rediriger vers un autre page ou je recupere la valeur de la date.

le header:

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
	<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). */
			jQuery(function($){
				$.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_activite').datepicker({
				onSelect: function(dateText, inst){
					$("#recup_date_activite").val(dateText);
				}
			});
		});
	</script>

le html:

Code :

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

1
2
<div id="date_activite"></div>
<input id="recup_date_activite" type="text" value=""/>

merci.

je desespere cela fait tout la matine que je suis dessus mais les doc n aide pas.

danielhagnoul · 26/06/2011, 22h18

Bonsoir

Lorsque l'on travaille sur plusieurs pages avec échange d'information entre les pages on fait appel aux transactions AJAX pour recevoir ou envoyer des informations au serveur de pages, par exemple PHP. Le code serveur analyse les informations reçues et agit en conséquence.

Pour transmettre une simple date, on peut bricoler.

Dans la page contenant le UI Datepicker :

Code :

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

1
2
3
4
5
6
7
8
$('#date_activite').datepicker({
	onSelect: function(dateText, inst){
		$("#recup_date_activite").val(dateText);
 
		// va vers la page "exGetJSON.html" et l'on transmet la date choisie
		window.document.location.href = "exGetJSON.html?" + dateText;
	}
});

Dans la page "exGetJSON.html" :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
/*
window.document.location
hash	Returns the anchor portion of a URL
host	Returns the hostname and port of a URL
hostname	Returns the hostname of a URL
href	Returns the entire URL
pathname	Returns the path name of a URL
port	Returns the port number the server uses for a URL
protocol	Returns the protocol of a URL
search	Returns the query portion of a URL
*/
// retourne ce qui se trouve après le "?"
var date = window.document.location.search.slice(1);

kate59 · 27/06/2011, 09h33

merci j'ai mit ceci dans mon header mais cela ne changer rien le lien m'affiche toujours index.php quand je survole un calendrier dans mon header:

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
$(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). */
			jQuery(function($){
				$.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_activite').datepicker({
	onSelect: function(dateText, inst){
		$("#recup_date_activite").val(dateText);
 
		// va vers la page "exGetJSON.html" et l'on transmet la date choisie
		window.document.location.href = "exGetJSON.html?" + dateText;
	}
});
		});

et index.php:

Code :

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

1
2
3
4
5
 
<div id="agenda">
<div id="date_activite"></div>
<input id="recup_date_activite" type="text" value=""/>
</div>

merci encore de l'aide.

parler trop vite cela fonctionne, je teste tout , merci.

kate59 · 27/06/2011, 09h49

Merci pour le code tout fonctionne je teste pour voir une derniere fois et je met en resolut si tout est ok.

danielhagnoul · 27/06/2011, 09h54

Bonjour

La page "exGetJSON.html" est le nom de ma seconde page dans mon test.

Je ne connais pas le nom de la page que vous voulez appeler en lui communiquant la date choisie !

kate59 · 27/06/2011, 10h07

Petite question si je voudrai n afficher que les mois sans les jours avec datepicker est ce possible, comment je pourrait faire?

MERCI.

danielhagnoul · 28/06/2011, 21h59

Bonsoir

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/humanity/jquery-ui.css">.

<p>Date: <input type="text" id="datepicker" size="30"/></p>.

Code :

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

1
2
3
<script charset="utf-8" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/i18n/jquery-ui-i18n.min.js"></script>
<script charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>

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
// http://jqueryui.com/demos/datepicker/#localization
// Utilise : "jquery-ui-i18n.min.js". Voir ci-dessus.
$.datepicker.setDefaults( $.datepicker.regional[ "fr" ] );
 
// http://jqueryui.com/demos/datepicker/#date-formats
$("#datepicker").datepicker({
	"dateFormat": "dd/mm/yy", // "mm" pour le mois
	// Mais vous pouvez afficher la date correctement et extraire le mois du String datetext
	onSelect: function(dateText, inst){
		// le format dépends de dateFormat
		var mois = parseInt(dateText.split("/")[1], 10);
 
		// va vers la page "exGetJSON.html" et l'on transmet la date choisie
		window.document.location.href = "exGetJSON.html?" + mois;
	}
});

27/06/2011, 09h49	#5
kate59 Membre du Club Inscription : janvier 2008 Messages : 705 Détails du profil Informations forums : Inscription : janvier 2008 Messages : 705 Points : 66 Points : 66	Merci pour le code tout fonctionne je teste pour voir une derniere fois et je met en resolut si tout est ok.
	00

27/06/2011, 09h54	#6
danielhagnoul Rédacteur Daniel Hagnoul Étudiant perpétuel Inscription : février 2009 Messages : 3 221 Détails du profil Informations personnelles : Nom : Daniel Hagnoul Âge : 61 Localisation : Belgique Informations professionnelles : Activité : Étudiant perpétuel Secteur : Enseignement Informations forums : Inscription : février 2009 Messages : 3 221 Points : 6 767 Points : 6 767	Bonjour La page "exGetJSON.html" est le nom de ma seconde page dans mon test. Je ne connais pas le nom de la page que vous voulez appeler en lui communiquant la date choisie ! __________________ FAQ jQuery Mon cahier d’exercices sur jQuery & Co Si un message vous a aidé ou vous semble pertinent, votez pour lui !
	00

27/06/2011, 10h07	#7
kate59 Membre du Club Inscription : janvier 2008 Messages : 705 Détails du profil Informations forums : Inscription : janvier 2008 Messages : 705 Points : 66 Points : 66	Petite question si je voudrai n afficher que les mois sans les jours avec datepicker est ce possible, comment je pourrait faire? MERCI.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email