11487 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Calendrier en jquery (datepicker)... La galère !

Bonsoir,


Afin de ne pas réinventer la roue en 2012,
et afin de travailler sur un code actuel,
pouvez-vous m'aider ?

Je recherche un code pour afficher un calendrier popup perpétuel,
(avec jours fériés en rouge, en français,
jour actuel en surbrillance...)
dès que l'on clique sur une icône...
à droite d'un input date...

c'est-à-dire comme ici, en haut à gauche !

Pouvez-vous m'aider ?
Modifié par jytest (19 Jul 2012 - 00:18)
Dew, merci.
C'est tout à fait cela que je cherchais.
Je viens de me permettre de changer le titre de ce post.

Avec les choix suivants :
datepicker
display month & year menus
theme : Sunny
calendrier fr...

Cela fonctionne presque...
Manque plus que le clic sur la zone input de la date à introduire, pour ouvrir le datepicker !

Pouvez-vous m'aider ?
Voulez-vous m'aider ?
D'avance un grand merci
Modifié par jytest (18 Jul 2012 - 11:12)
salut...

EUh... ton problème de click.... comment dire...

c'est standard, c'est même la fonction par défaut :|

t'as un endroit où on peut voir l'erreur de ton code ??? pourquoi ça fonctionne pas quand on clique ?
Je reprécise mes petits soucis (qui sont néanmoins énormes, question de point de vue) :

1.
Pour le click sur l'input,
comment faire ?

2.
De plus, j'aurais aimé que les dimanches (et jours fériés Belgique, France, Pays-Bas, Suisse, Allemagne...) soient
en texte blanc gras dans des cases rouge, sans changer le fond du popup !
Et cliquables !!!

3.
Pour finaliser le code, j'ai voulu
utiliser ce jquery sur 2 input date différents.
(Le code vient d'être modifié à cet effet.)
Je n'y arrive pas avec des id sous forme de tableau !
Pouvez-vous m'aider ?



voici mon code (modifié) :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<LINK REL="SHORTCUT ICON" href="logos/favicon.ico">

<title>calendrier</title>
<style type="text/css">
<!--

-->
</style>

<link rel="alternate" type="application/rss+xml" title="ROR" href="sitemap.xml" />
<link href="css/general.css" rel="stylesheet" type="text/css" media="all">
<link href="css/faq.css" rel="stylesheet" type="text/css" media="all">
<script type="text/javascript" src="js/jquery.js"></script>
<link href="js/ui/jquery-ui-1.8.21.custom.css" rel="stylesheet" type="text/css" media="all">
<script type="text/javascript" src="js/ui/jquery.effects.core.js"></script>
<script type="text/javascript" src="js/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="js/ui/jquery.ui.datepicker.js"></script>
<script>
	/* 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']);
	});
	$(function() {
		$( "#datepicker[]" ).datepicker({
			showOn: "button",
			buttonImage: "images/general/calendar.gif",
			buttonImageOnly: true,
			changeMonth: true,
			changeYear: true,
			showAnim: "show"
		});
	});

	function bascule() {
		$('#datepicker').datepicker();$('#datepicker').datepicker('show');	
	}

	</script>
</head>

<body>

<div>
<p>Date: <input type="text" id="datepicker[0]" onclick="bascule();"></p>
<p>Date: <input type="text" id="datepicker[1]" onclick="bascule();"></p>

</div>

<div>
<p>Go !</p>
</div>

</body>
</html>

Modifié par jytest (19 Jul 2012 - 00:17)
J'ai vraiment besoin de votre aide.
Je viens de passer en détail tout le code js de l'ui.
Je trouve pas !

A l'aide !
svp !
Merci d'avance.
Modifié par jytest (18 Jul 2012 - 11:27)
re...

une solution simple pour plusieurs itératoin est d'utiliser les class et non les id en jQuery..

donc remplace id="datepicker" par class="datepicker"

et dans ton js #datepicker devient .datepicker

ça déjà tu aura tes 2 inputs
pour le clic sur le input..

j'ai aps testé mais ça me parait logique...

met buttonImageOnly: true, à false...
si c'est logique tu devrais pouvoir cliquer sur les deux
Je viens de tester :


1.
Pour le click sur l'input,
J'ai trouvé !
Il faut plutôt utiliser :
showOn: "both"



2.
De plus, j'aurais aimé que les dimanches (et jours fériés Belgique, France, Pays-Bas, Suisse, Allemagne...) soient
en texte blanc gras dans des cases rouge, sans changer le fond du popup !
Et cliquables !!!
J'ai trouvé !
En ajoutant, dans le css de UI :
.ui-datepicker-week-end a.ui-state-default {
	color:#FFFFFF;
	background-image:none;
	background-color:#FF0000;
}
.ui-datepicker-week-end a.ui-state-hover {
	color:#FFFFFF;
	background-image:none;
	background-color:#CC0000;
}
.ui-datepicker-week-end a.ui-state-active {
	background-image:none;
	background-color:#FFFFFF;
	color:#0074c7;
}




3.
pchlj a trouvé !
J'ai donc modifié comme ceci.
$(function() {
		$( ".datepicker" ).datepicker({
			showOn: "button",
			buttonImage: "images/general/calendar.gif",
			buttonImageOnly: false,
			changeMonth: true,
			changeYear: true,
			showWeek: true,
   			beforeShowDay: '',
			showAnim: "show"
		});
	});


<p>Date: <input type="text" id="datepicker01" class="datepicker"></p>
<p>Date: <input type="text" id="datepicker02" class="datepicker"></p>

Modifié par jytest (19 Jul 2012 - 00:32)
Sujet clos
Aller à