Affichage de datepicker

Version imprimable

Bonjour,

J'ai un problème concernant Jquery, je n'arrive pas à afficher le datepicker quand je clique sur ma zone input de date.

Ci après le code php, je n'ai mis que le code concernant la saisie de la date et l'appel avec jsquery.

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
<?php
 
print("<html>");
print("<head>");
print("<link rel=\"stylesheet\" type=\"text/css\"  href=\"JsQuery/jquery_dev/css/jquery-ui.css\" />");
print("<link rel=\"stylesheet\" type=\"text/css\"  href=\"JsQuery/jquery_dev/css/style.css\" />");
 
print("<title>Saisie des dépenses</title>");
print("</head>");
print("<body>");
$gst_mode = empty($_POST['mode']) ? 'GRILLE': $_POST['mode'] ;
 
function Saisie_Montant()
{   
   print("<form action=\"".$_SERVER['PHP_SELF']."\" method=\"post\">");  
	print("<br>&nbsp;&nbsp;Date (jj/mm/aaaa)");
 
	print("<input type=text size=10 id=\"calendrier1\" name=date_jour autofocus><br><br>");
	print("<div class=\"cadre_SA_bouton_bis\">");
   print("<input type=hidden name=mode value=VALIDER>");  
   print("<input type=submit value=\"Valider la dépense\" name=ok>");  
	print("</div>");
   print('</form>');  
}
 
switch ($gst_mode) 
{
  case 'GRILLE' : 
     Saisie_Montant(); 
  break;
....
}
?>		
<script type="text/javascript" src="JsQuery/jquery_dev/jquery-v1.9.1.js"></script>
<script type="text/javascript" src="JsQuery/jquery_dev/jquery-ui.js"></script>
<script type="text/javascript" src="Appli_compte/Js_datepicker.js"></script>
 
<?php		
print("</body>");
print("</html>");
?>

et Js_datepicker.js

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script>
$(function(){	
$.datepicker.regional['fr'] = {
    closeText: 'Fermer',
    prevText: 'Précédent',
    nextText: 'Suivant',
    currentText: 'Aujourd\'hui',
    monthNames: ['Janvier','Février','Mars','Avril','Mai','Juin','Juillet','Août','Septembre','Octobre','Novembre','Décembre'],
    monthNamesShort: ['Janv.','Févr.','Mars','Avril','Mai','Juin','Juil.','Août','Sept.','Oct.','Nov.','Déc.'],
    dayNames: ['Dimanche','Lundi','Mardi','Mercredi','Jeudi','Vendredi','Samedi'],
    dayNamesShort: ['Dim.','Lun.','Mar.','Mer.','Jeu.','Ven.','Sam.'],
    dayNamesMin: ['D','L','M','M','J','V','S'],
    weekHeader: 'Sem.',
    dateFormat: 'dd/mm/yy',
    firstDay: 1,
    isRTL: false,
    showMonthAfterYear: false,
    yearSuffix: ''
};
$.datepicker.setDefaults($.datepicker.regional['fr']);
	$( "#calendrier1" ).datepicker();
});
</script>;

Je vous remercie de me dire pourquoi mon calendrier datepicker ne s'affiche pas, où se trouve mon erreur ?
Merci beaucoup.

15/03/2013, 21h41
Bovino

Si ton script est dans un fichier externe comme le laisse supposer ton code, il ne doit pas contenir les balises <script> !

Bonjour,

Même en sortant les balises script dans Js_datepicker.js çà ne change rien.

Alors j'ai repris avec les link et script dans le HEAD comme suit :
Code:

1 2 3 4 5 6 7 8 9 10 <head> <link rel="stylesheet" type="text/css" href="JsQuery/jquery_dev/css/jquery-ui.css" /> <script type="text/javascript" src="JsQuery/jquery_dev/jquery-v1.9.1.js"></script> <script type="text/javascript" src="JsQuery/jquery_dev/jquery-ui.js"></script> <script> $(function() { $( "#calendrier1" ).datepicker({ dateFormat: 'dd/mm/yy'}); }); </script> </head>
et toujours mon input date :

Code:

<input type=text size=10 id="calendrier1" name=date_jour autofocus><br><br>

Lorsque j'arrive sur la page toujours pas de datepicker en cliquant sur ma zone, mais si avant je clique n'importe où sur la page en dehors de cette zone input et que je reviens sur l'input en cliquant dessus, j'ai bien mon datepicker qui s'affiche,

Qu'est ce qu'il faut mettre, et à quel endroit, pour mon datepicker s'affiche en cliquant aussitôt sur ma zone input ???

Merci d'avance.

17/03/2013, 10h32
Bovino

Déjà, prends l'habitude d'entourer les valeurs d'attributs de quotes.

Ensuite, supprime autofocus de ton input, ça devrait aller mieux.
17/03/2013, 11h01
theo17

Ok pour l'habitude d'entourer les valeurs d'attributs de quotes.

C'était bien l'autofocus qui empêchait d'afficher le datepicker !!

Merci beaucoup et bonne journée.