[UI] DatePicker - onSelect inactif

jeff24 · 22/11/2012, 11h16

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 :

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
$("#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 !

danielhagnoul · 22/11/2012, 22h19

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 :

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
<!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>

jeff24 · 23/11/2012, 13h45

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...

danielhagnoul · 23/11/2012, 18h29

Citation:

Envoyé par jeff24

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

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.

jeff24 · 23/11/2012, 20h26

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é ? ^^

danielhagnoul · 23/11/2012, 23h05

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.

MaitrePylos · 25/11/2012, 10h39

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 :

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
 
            <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>

danielhagnoul · 25/11/2012, 19h49

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();.

MaitrePylos · 25/11/2012, 20h55

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 :

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

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

MaitrePylos · 25/11/2012, 21h24

Ok, nickel avec l'id dans le form.

danielhagnoul · 25/11/2012, 23h03

Citation:

Envoyé par MaitrePylos

ben ici

Code :

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

1
2
 
<input class="jour control-group" required="required" name="change" value="" type="text" id="form_change" />

Alors l'écriture avec parents() devrait fonctionner.

25/11/2012, 19h49	#8
danielhagnoul Rédacteur Daniel Hagnoul Étudiant perpétuel Inscription : février 2009 Messages : 3 848 Détails du profil Informations personnelles : Nom : Daniel Hagnoul Âge : 62 Localisation : Belgique Informations professionnelles : Activité : Étudiant perpétuel Secteur : Enseignement Informations forums : Inscription : février 2009 Messages : 3 848 Points : 14 346 Points : 14 346	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();. __________________ FAQ jQuery Mon cahier d’exercices sur jQuery & Co plugin dialogModal Si un message vous a aidé ou vous semble pertinent, votez pour lui !
	00

25/11/2012, 21h24	#10
MaitrePylos Responsable Livres Gérard Ernaelsten DBA & Dev PHP Inscription : juin 2005 Messages : 3 588 Détails du profil Informations personnelles : Nom : Gérard Ernaelsten Âge : 40 Localisation : Belgique Informations professionnelles : Activité : DBA & Dev PHP Secteur : Service public Informations forums : Inscription : juin 2005 Messages : 3 588 Points : 8 834 Points : 8 834	Ok, nickel avec l'id dans le form. __________________ Il faut toujours viser la lune, car même en cas d'échec on arrive dans les étoiles. O.Wilde Mes Articles/Critiques : Merise - Guide pratique PHPExcel PostgreSQL : Administration et exploitation d'une base de données PostgreSQL : Entraînez-vous à créer et programmer une base de données relationnelle
	00

23/11/2012, 13h45	#3
jeff24 Invité de passage Inscription : janvier 2009 Messages : 29 Détails du profil Informations personnelles : Âge : 25 Informations forums : Inscription : janvier 2009 Messages : 29 Points : 4 Points : 4	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...
	00

23/11/2012, 20h26	#5
jeff24 Invité de passage Inscription : janvier 2009 Messages : 29 Détails du profil Informations personnelles : Âge : 25 Informations forums : Inscription : janvier 2009 Messages : 29 Points : 4 Points : 4	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é ? ^^
	00

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