UI Datepicker. Savoir que datepicker est ouvert

**-yasmine-** · 21/07/2010, 16h57

Bonsoir,

J'utilise les plugins datepicker et validate pour mes formulaires, mon problème est le suivant
lorsqu'on sélectionne une date du datepicker, le highlight de validate s'exécute car il détecte l'évènement blur sur mon input, alors il m'affiche mon input en couleur pendant un quart de seconde
pour palier à ce problème je fais un trigger focus sur l'input dans mon option onClose du datepicker, c'est pas excellent mais ça évite mon blur de se lancer

Je cherche à faire un truc plus propre, j'aimerais bien avoir une option/fonction qui me dit si mon datepicker est ouvert pour empêcher mon highlight de changer la couleur de l'input, je n'ai pas trouvé cette information jusqu'à présent, est ce que quelqu'un à une idée?

Voici mon code datepicker :

Code :

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

1
2
3
4
5
6
7
8
9
10
$("#date").datepicker(
 	{
	    changeMonth: true,
	    changeYear: true,
	    dateFormat: 'dd/mm/yy',
	    minDate: new Date(1900, 1 - 1, 1),
	    maxDate: +0, // Date actuelle
	    defaultDate: '01/01/1980',
	    onClose: function(date){$(this).trigger("focus");}
	});

Et mon highlight :

Code :

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

1
2
3
highlight: function(element, errorClass) {
			$(element).css("background-color","#f5ad66");
		 }

Merci,

**aeroth** · 22/07/2010, 17h35

pour etre rapide, sans trop rechercher, je vais te donner une methode trés simple, mais pas trés "propre".

Quand ton datepicker n'est pas ouvert, le div qui l'encadre (class: .ui-datepicker) est normalement "hide" donc, tu verifie juste s'il est hide ou pas

Code :

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

1
2
3
 
if ($(".datepicker").is(":hidden")){
....

je ne sais pas du tout si cela va marcher, mais ça peut t'aider je pense...

Cordialement.

**danielhagnoul** · 23/07/2010, 18h44

Bonsoir

L'idée d'aeroth est bonne Voici un exemple pour la gestion du blur :

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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!doctype html>
<html lang="fr">
<head>
	<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.2.custom.css">	
	<style>
		/* BASE */
		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;
		}
		p {
			padding:6px;
		}
		ul,ol,dl {
			list-style:none;
			padding-left:6px;
			padding-top:6px;
		}
		li {
			padding-bottom:6px;
		}
		div#conteneur {
			width:95%;
			height:500px;
			margin:12px auto;
			padding:6px;
			background-color:#FFFFFF;
			color:#000000;
			border:1px solid #666666;
			font-size:0.8em;
		}		
		div#affiche {
			clear:both;
			margin:12px;
			padding:6px;
			border:1px solid #999999;
			background-color:#FFFFFF;
			color:#000000;
		}
 
		/* TEST */
	</style>
	<script charset="utf-8" src="../lib/jqueryui/js/jquery-1.4.2.min.js"></script>
	<script charset="utf-8" src="../lib/jqueryui/js/jquery-ui-1.8.2.custom.min.js"></script>
 	<script>
		$(function(){
			// jQuery 1.4.2 focusin pour focus et focusout pour blur
			$("input").bind("focusout", function(event){
				if ($(".ui-datepicker").is(":visible")){
					console.log("C'est le datepicker : " + event.target);
					return false; // on bloque l'événement
				}
 
				console.log("Ce n'est pas le datepicker : " + event.target);
				return true; // on transmet l'événement
			});
 
			$("#autre").focusout(function(event){
				console.log("event focusout sur : " + event.target.id);
				return false; // on ne transmet pas l'événement
			});
 
			/*
			 * Il y a plusieurs input dans le datepicker
			*/
			$("#date").datepicker({
				changeMonth: true,
				changeYear: true,
				dateFormat: 'dd/mm/yy',
				minDate: new Date(1900, 1 - 1, 1),
				maxDate: +0, // Date actuelle
				defaultDate: '01/01/1980'
			});
		});
	</script>
</head>
<body>
	<div id="conteneur">
		<input id="date" type="text"/>
		<input id="autre" type="text"/>
	</div>
</body>  
</html>

**-yasmine-** · 13/08/2010, 09h57

Salut,

J'ai essayé en testant si le div du datepicker est hidden ou pas, mais ça n'était toujours pas parfait, j'ai fini par utiliser un boolean que j'initialise à faux, ensuite je le positionne à vrai dans l'option du datepicker beforeShow et à faux dans onClose
ça marche maintenant

Merci beaucoup pour votre aide!

UI Datepicker. Savoir que datepicker est ouvert

jQuery

Discussions similaires

Partager

Partager