Discussion :

[yeste64]

Bonjour à tous.

Voilà, je voudrais savoir s'il était possible de désactiver la fermeture automatique du datepicker lorsque l'on clique ailleurs que dans celui-ci ?

Merci d'avance de votre réponse.

[PP(Team)]

Bonjour,

Il semble que ce lien réponde à ta question :
http://stackoverflow.com/questions/1...licking-a-date

Cordialement.

[yeste64]

Ce qu'il fait là n'est-il pas seulement pour l'évènement "clic sur une date" ?

Moi c'est l'évènement "clic en dehors du datepicker" que je voudrais annuler.

[PP(Team)]

OK, donc plutôt ce lien là :

http://forum.jquery.com/topic/datepi...s-click-events

Cordialement.

[yeste64]

Si je comprends bien, il faudrait que je déclare un évènement clic sur mon body, qui annulerait la fermeture du datepicker si celui-ci est ouvert, et qu'ensuite j'annule ce comportement au clic dans le datepicker ?

Je trouve pas ça très très propre..

J'ai réussi à désactiver ce comportement en allant directement supprimer les lignes correspondantes dans le fichier jquery ui custom. Mais je ne peux pas me permettre de faire ça pour tous les projets dans l'avenir (ce fichier sera réutilisé dans d'autres projets).

Voici les lignes en question :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
	/* Close date picker if clicked elsewhere. */
	_checkExternalClick: function(event) {
		if (!$.datepicker._curInst)
			return;
		var $target = $(event.target);
		if ($target[0].id != $.datepicker._mainDivId &&
				$target.parents('#' + $.datepicker._mainDivId).length == 0 &&
				!$target.hasClass($.datepicker.markerClassName) &&
				!$target.hasClass($.datepicker._triggerClass) &&
				$.datepicker._datepickerShowing && !($.datepicker._inDialog && $.blockUI))
			$.datepicker._hideDatepicker();
	},

N'y aurait-il pas moyen de désactiver ce comportement autrement qu'en allant directement intervenir dans le fichier jquery ui custom ?

[PP(Team)]

J'espère que non.
Je n'ai pas de Datepicker sous la main, mais il me semble que tu peux intercepter l’événement avant que Datepicker ne le voit comme dans le lien que je t'ai fournis :

Code :

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

1
2
3
4
 
$("body").click(function(event) {
    if ($(event.target).parents(".ui-datepicker").size() == 0) { /* click is not from within a datepicker */ }
    });

Ceci va permettre d'attraper l’événement, et si tu vois que le Datepicker s'est fermé, tu le rouvres dans cette fonction.

[yeste64]

Je n'y arrive décidément pas..

Code :

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

1
2
3
4
5
	$("body").click(function(event) {
		if ($(event.target).parents(".ui-datepicker").size() == 0) {
			$('#ui-datepicker-div').show();
		}
	});

Mais ça ne marche pas

EDIT : Il n'y a aucune possibilité d'accéder à sa propriété du genre comme ça :

Code :

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

1
2
3
$('monInput').datepickder(_checkExternalClick: function(event) {
     return false;
});

[PP(Team)]

Premier test :

Code :

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

1
2
3
4
5
6
 
$("body").click(function(event) {
		if ($(event.target).parents(".ui-datepicker").size() == 0) {
			alert("toto");
		}
	});

Si tu lances ce script, cela affiche-t-il toto ? Si non, c'est qu'il y a un soucis avec le code. Dans ce cas, fais :

Code :

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

1
2
3
4
 
$("body").click(function(event) {
		alert ($(event.target).parents(".ui-datepicker").size());
	});

Est-ce que cela affiche quelque chose ?

[yeste64]

Cela m'affiche toujours toto, à part quand je clique à l'intérieur du datepicker. C'est donc l'effet voulu.

J'ai essayé :

Code :

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

1
2
3
4
5
6
7
$("body").click(function(event) {
	if ($(event.target).parents(".ui-datepicker").size() == 0){
		if($('#ui-datepicker-div').css('display') != 'none' &&  $('#ui-datepicker-div').text() != ''){
			$('#ui-datepicker-div').show();
		}
	}
});

Mais sans succès

[PP(Team)]

OK Donc :

Code :

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

1
2
3
4
5
6
7
 
$("body").click(function(event) {
		if ($(event.target).parents(".ui-datepicker").size() == 0) {
			alert($('#ui-datepicker-div').attr("style"));
                        alert($('#ui-datepicker-div').css());
		}
	});

Qu'est ce que cela t'affiche ?

[yeste64]

Il n'y a que la hauteur d'intéressante. Le reste est invariant.

Le problème c'est que j'ai une animation pour l'affichge (un slideDown). Du coup, l'évènement s'exécute en plein milieu de l'animation, c'est pour ça que mon display none n'est pas détecté. Il arrive qu'il le soit, mais ça n'est que quand l'animation a eu le temps de se terminer avant que l'évènement ne soit déclenché.

Du coup, le problème reste le même avec la hauteur. Il y a des fois où elle sera à 0, mais la majorité du temps, elle est supérieure à 0, car l'animation n'a pas eu le temps de se terminer avant que l'évènement s'exécute.

Je sais pas si je me fait bien comprendre..

[PP(Team)]

Tu parles de hauteur dans la pile du code ou de hauteur "z-index" ?

Si c'est pour la pile du code, libre à toi de stocker le fait que tu dois faire une action :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
var must_show = false;
$("body").click(function(event) {
		if ($(event.target).parents(".ui-datepicker").size() == 0) {
			must_show = true;
		}
	});
 
//Après que ton animation soit terminée :
if(must_show)
    $('#ui-datepicker-div').show();

[yeste64]

Je parlais de hauteur de la div en px tout simplement.

La solution que tu proposes n'est pas bonne car si je fais comme ça, le datepicker se refermera, et une fois refermé, il se réouvrira, ce qui n'est pas du tout acceptable visuellement..

C'est fou qu'il n'y ai pas moyen de désactiver ça via une simple option à la déclaration du datepicker quand même..

[PP(Team)]

En effet, c'est étonnant.

Je viens de voir toutes les propriétés possibles, et il me semble intéressant que tu utilises la propriété "onClose".
http://keith-wood.name/datepickRef.html

Le but est de faire que si au "onClose" la date n'est pas sélectionnée, alors faire un "return false" en espérant que cela annule l'action courante : fermeture de la fenêtre.

En espérant que cela ait pu t'aider.

Cordialement.

[SPACHFR]

Quelque chose comme ça. Mais ça fonctionne uniquement si la date n'est pas renseignée.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
$("#datef").datepicker({ 
		showAnim : 'fold',
		showOn: 'button',
		buttonImage : './themes/start/images/calendar.png',
		buttonImageOnly: true,
		dateFormat: 'yy-mm-dd',
		changeMonth: true,
		changeYear: true,
		beforeShow : function() {},
		onClose : function(){ if($("#datef").val=="") return false;}
		});

[PP(Team)]

Et en essayant quelque chose comme ceci :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
var has_clicked_on = false;
$("#datef").datepicker({ 
		showAnim : 'fold',
		showOn: 'button',
		buttonImage : './themes/start/images/calendar.png',
		buttonImageOnly: true,
		dateFormat: 'yy-mm-dd',
		changeMonth: true,
		changeYear: true,
		beforeShow : function() { has_clicked_on = false;},
                onClick: function() { has_clicked_on = true; }
		onClose : function(){ return has_clicked_on && $("#datef").val!="";}
		});

Le but étant de dire que si la personne n'a pas cliqué dans le datepicker, alors on ne l'autorise pas à sortir.

Cordialement.

[yeste64]

Le problème est que "return false" dans le "onClose" n'a aucun effet.. Ca n'empêche pas le datepicker de se fermer.

EDIT : http://stackoverflow.com/questions/9...-ui-datepicker

[yeste64]

Bon, j'ai adopté une solution, c'est sans doute pas top, mais c'est le plus pratique pour moi.
Alors voilà ce que j'ai fais :

- J'ai tout d'abord modifié le code source de jquery ui custom à l'endroit qui m'intéressait :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* Close date picker if clicked elsewhere. */
_checkExternalClick: function(event) {
	if(typeof fermetureQuandClicALexterieur != 'undefined' && fermetureQuandClicALexterieur){
		if (!$.datepicker._curInst)
			return;
		var $target = $(event.target);
		if ($target[0].id != $.datepicker._mainDivId &&
				$target.parents('#' + $.datepicker._mainDivId).length == 0 &&
				!$target.hasClass($.datepicker.markerClassName) &&
				!$target.hasClass($.datepicker._triggerClass) &&
				$.datepicker._datepickerShowing && !($.datepicker._inDialog && $.blockUI))
			$.datepicker._hideDatepicker();
	}
},

(j'ai pris ce nom de variable à la con pour être sûr qu'il ne serait pas utilisé autre part)

Et ensuite, dans la déclaration de mon datepicker, je fais ceci :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
//On déclare le datepicker sur l'input
$input.datepicker({
    beforeShow: function(input, inst){
    	fermetureQuandClicALexterieur= false; //true ou false pour activer ou désactiver la fermeture automatique
    },
    onSelect: function(dateText, inst){
      ...
    },
    onClose: function(dateText, inst){
      ...
    }
});

Voilà, comme ça, ça marche..

J'ai aussi créer un petit plug-in jQuery perso me permettant de déclarer mes datepicker plus rapidement. Ainsi, je passe un paramètre supplémentaire à l'appel de mon plug-in, en l'ocurrence true/false, et ça me permet de choisir d'activer la fermeture automatique du datepicker, ou pas.

Merci à tous pour votre aide sur ce problème. Si jamais il y a des meilleures solutions, je suis preneur.

A bientôt !