DatePicker - onSelect inactif

Version imprimable

Bonjour à tous,

Je suis assez nouveau dans le développement en jQuery,
En fait j'aimerai savoir pourquoi quand je clique sur mon datePicker, ce qu'il y a dans le onSelect ne se déclenche pas.
J'ai déjà vu des codes comme ça marchant très bien. J'ai peut-être loupé un truc...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$("#refdate").datepicker({
        showOn: "button", 
        buttonImage: CONTEXT_ROOT+"/technical/images/calendarbutton.gif", 
        buttonImageOnly: true,
        onSelect:function(){
            alert(($.datepicker.parseDate($.datepicker._defaults.dateFormat, MINDATE, null)));
            var minRefDate = ($.datepicker.parseDate($.datepicker._defaults.dateFormat, MINDATE, null));
            var maxRefDate = ($.datepicker.parseDate($.datepicker._defaults.dateFormat, MAXDATE, null));
            $("#refdate").datepicker("destroy");
            $("#refdate").datepicker({
                showOn: "button", 
                buttonImage: CONTEXT_ROOT+"/technical/images/calendarbutton.gif", 
                buttonImageOnly: true,
                minDate: minRefDate,
                maxDate: maxRefDate,
                showWeeks: true
            });
        },
        showWeeks: true
    });

Qu'en pensez-vous, pourquoi ça ne fonctionne pas ?

Merci d'avance !

Bonsoir

Le contenu de onSelect() déclenche des erreurs dans Firebug que je n'arrive pas à corriger.

J'ai construit un exemple similaire au vôtre.

L'utilisateur peut choisir une date lorsqu'il clique sur l'icône calendrier.

Lors du premier clic, l'utilisateur peut choisir une date quelconque (dateStr).

Lors des clics suivants, l'utilisateur peut choisir une date dans l'intervale : minDate < dateStr < maxDate.

Pour tester, il suffit de copier-coller le code de ma page de test.

En espérant avoir été utile, pourriez-vous me dire pour quel usage vous avez besoin d'un calendrier de ce type ?

Code:

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
<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<link href='http://fonts.googleapis.com/css?family=Sofia|Ubuntu:400|Kreon'>
	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/styles/dvjhRemBase.css">
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/themes/overcast/jquery-ui.css">
	<style>
		/* TEST */
 
	</style>
</head>
<body>
	<h1>Forum jQuery</h1>
	<h2>Titre 2</h2>
	<section class="conteneur">
 
		<p>Date: <input type="text" id="datepicker" />
 
 
	</section>
	<footer itemscope itemtype="http://danielhagnoul.developpez.com/">
		<time datetime="2012-11-22T22:17:44.180+01:00" pubdate>2012-11-22T22:17:44.180+01:00</time>
		<span itemprop="name">Daniel Hagnoul</span>
		<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
		<a href="http://danielhagnoul.developpez.com/" itemprop="url">Mon cahier d’exercices</a>
		<a href="http://javascript.developpez.com/faq/jquery/" itemprop="url">FAQ</a>
		<a href="http://javascript.developpez.com/cours/?page=frameworks#jquery" itemprop="url">Tutoriels</a>
	</footer>
	<script src="http://danielhagnoul.developpez.com/lib/raphael-min.js"></script>
	<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/i18n/jquery-ui-i18n.min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/jquery-ui.min.js"></script>
	<script charset="utf-8" src="http://danielhagnoul.developpez.com/lib/dvjh/base.js"></script>
	<script>	
		"use strict";
 
		$(function(){
 
			$.datepicker.setDefaults( $.datepicker.regional[ "fr" ] );
 
			var MINDATE = "-3m -15d", // la date choisie - 3 mois et 15 jours
				MAXDATE = "+1y +3m +15d"; // la date choisie + 1 an 3 mois et 15 jours
 
			$( "#datepicker" ).datepicker({
				showOn : "button",
				buttonImage : "http://danielhagnoul.developpez.com/images/calendar.gif",
				buttonImageOnly : true,
		        showWeeks : true,
		        changeMonth : true,
		        changeYear : true,
		        showButtonPanel : true,
		        onSelect : function( dateStr, ObjPicker ){
		        	// this est l'input
 
		            console.log( dateStr );
		        },
		        onClose : function( dateStr, ObjPicker ){
		        	// this est l'input
 
		        	$( "#datepicker" )
		        		.datepicker( "destroy" )
		        		.datepicker({
		        			showOn : "button",
							buttonImage : "http://danielhagnoul.developpez.com/images/calendar.gif",
							buttonImageOnly : true,
					        showWeeks : true,
					        changeMonth : true,
					        changeYear : true,
					        showButtonPanel : true,
					        defaultDate : dateStr,
					        minDate : MINDATE,
					        maxDate : MAXDATE,
					        onSelect : function( dateStr, ObjPicker ){
					        	// this est l'input
 
					            console.log( dateStr );
					        }
		        		});
		        }
			});
 
		});
 
		$(window).load(function(){
 
		});
	</script>
</body>  
</html>

23/11/2012, 13h45
jeff24

En fait c'est pour limiter les dates disponibles dans le datepicker.

Puis j'ai quasiment le même cas avec le même code sur une autre page, mais cela fonctionne parfaitement.

J'ai fait une parade pour mon cas du coup ça marche, mais je comprends pas pourquoi dans le cas en dessous ça marche pas...
23/11/2012, 18h29
danielhagnoul

Citation:

Envoyé par jeff24

En fait c'est pour limiter les dates disponibles dans le datepicker.

:mouarf:

Cela je le sais déjà, mais je voulais dire dans quel but ? Dans quelle situation ? Une réservation de quoi ou pour quoi ? Autre chose ? Je parle de l'aspect métier.
23/11/2012, 20h26
jeff24

En fait c'est dans le cadre de mon travail.

C'est pour faire une limite de recherche sur un planning réseaux, genre on cherche des réseaux de tel à tel dates (MINDATE et MAXDATE) selon ces deux paramètres métier en base de données.

Je sais pas si je suis très clair.

Juste de la curiosité ? ^^
23/11/2012, 23h05
danielhagnoul

Citation:

Envoyé par jeff24

Juste de la curiosité ? ^^

Oui !

C'est la première fois que je rencontre cette demande (date quelconque au premier clic, puis limite de date pour les clics suivants), d'habitude on limite les dates dès la première utilisation du datepicker.

Je suis dans un souci similaire sur le OnSelect, j'essaye de faire un submit sur Datepicker , mais il ne se déclenche pas.

Code:

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
 
            <script>
    $(function () {
        $('.jour').datepicker({
            dateFormat:'dd/mm/yy',
            selectOtherMonths:true,
            changeMonth:true,
            changeYear:true,
            dayNamesMin:['Di', 'Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa'],
            firstDay:1,
            yearRange:'c-2:c+4',
            onSelect: function (dateText, inst) {
                $(this).parent('form').submit();
            }
        })
 
    });
</script>
 
 
 
<form action="http://localhost/FuelGesta/public/tableau/" class="form_heures right" accept-charset="utf-8" method="post">
<p><label for="form_">Changement de semaine</label>
    <input class="jour control-group" required="required" name="change" value="" type="text" id="form_change" /></p>
</form>

25/11/2012, 19h49
danielhagnoul
Bonsoir

Dans l'extrait de code HTML :
- Je ne vois pas l'input de type TEXT du UI Datepicker ?
- Je vois que le contenu du formulaire est dans un tag P, alors : $(this).parents('form').submit();. Si cette solution ne fonctionne pas, le plus simple est de donné un ID au formulaire : $( "#formID" ).submit();.
25/11/2012, 20h55
MaitrePylos
Citation:
Envoyé par danielhagnoul

Bonsoir

Dans l'extrait de code HTML :

Je ne vois pas l'input de type TEXT du UI Datepicker ?
ben ici
Code:

1 2 <input class="jour control-group" required="required" name="change" value="" type="text" id="form_change" />
Mais je vais tester avec un id dans le form
25/11/2012, 21h24
MaitrePylos

Ok, nickel avec l'id dans le form.
25/11/2012, 23h03
danielhagnoul
Citation:
Envoyé par MaitrePylos

ben ici

Code:

1 2 <input class="jour control-group" required="required" name="change" value="" type="text" id="form_change" />
Alors l'écriture avec parents() devrait fonctionner.