Datepicker - t.datepicker is undefined

**rolandl** · 05/06/2013, 23h45

Bonsoir à tous,

Je cherche à utiliser le widget datepicker de la bibliothèque JQuery UI mais sans succès.

J'ai importé les fichiers suivants dans les balises head de ma page :

Code :

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

1
2
3
<script src="/js/jquery-1.9.1.min.js"></script>
<script src="/js/jquery.ui.datepicker-fr.min.js"></script>
<link href="/css/jquery.ui.datepicker.min.css" rel="stylesheet" media="screen" />

J'ai également déclaré un champ input :

Code :

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

<input type="text" id="datepicker" />

et j'ai inséré le morceau de code suivant :

Code :

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

1
2
3
4
5
6
7
8
9
10
<script type="text/javascript">
	$(document).ready(function () {			
		$("#datepicker").datepicker({
			showOn: "button",
			buttonImage: "/images/icons/calendrier.png",
			buttonImageOnly: true
		});
 
	});
</script>

Malheureusement, lorsque ma page s'affiche, le bouton pour afficher le calendrier ne s'affiche pas et dans la console d'erreur, j'ai le message suivant :

Horodatage : 05/06/2013 23:37:00
Erreur : TypeError: t.datepicker is undefined
Fichier Source : http://dev.mon-site.fr:8080/js/jquer...cker-fr.min.js
Ligne : 4

JQuery n'étant absolument pas ma spécialité, je n'arrive pas à corriger ce problème.

Merci d'avance pour votre aide !

**MinDBuSteR** · 06/06/2013, 00h55

Bonsoir,

Pourrait-on voir le code de la page au complet ?

A quel moment fais tu ton appel à datepicker ?

**rolandl** · 06/06/2013, 07h38

Bonjour,

Voici le code complet de ma page une fois affiché dans le navigateur :

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
<!DOCTYPE html>
<html>
	<head>
		<title>Mon site</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="robots" content="noindex, nofollow" />
 
		<!-- CSS -->
		<link href="/css/bootstrap.min.css" rel="stylesheet" media="screen">
		<link href="/css/trider.min.css" rel="stylesheet" media="screen">
		<link href="/css/jquery.ui.datepicker.min.css" rel="stylesheet" media="screen" />
 
		<!-- JS -->
		<script src="/js/jquery-1.9.1.min.js"></script>
		<script src="/js/jquery.ui.datepicker-fr.min.js"></script>
		<script src="/js/bootstrap.min.js"></script>
 
		<!-- FANCY BOX -->
		<script type="text/javascript" src="/js/jquery.fancybox.js?v=2.1.4"></script>
		<link rel="stylesheet" type="text/css" href="/css/jquery.fancybox.css?v=2.1.4" media="screen" />
	</head>
 
	<body>				
		<div class="container margin-top-60">
			<h1>Session</h1>
 
                        <form action="" method="post" class="form-horizontal well">
                            <fieldset>
		                <legend>Ajouter une session</legend>
		                <div class="control-group">
                                    <label class="control-label" for="calendrier">Date * :</label>
                                    <div class="controls">
                                        <input type="text" name="calendrier" id="datepicker" readonly="readonly" />
                                    </div>
                            </div>
                            <input type="hidden" name="id" />		
 
                            <div class="text-align-right">
			        <button class="btn btn-success" type="submit"><i class="icon-ok icon-white"></i>&nbsp;Sauvegarder</button>
		            </div>
	                </fieldset>
                    </form>
 
                    <script type="text/javascript">
	                $(document).ready(function () {			
		            $("#datepicker").datepicker({
			        showOn: "button",
			        buttonImage: "/images/icons/calendrier.png",
			        buttonImageOnly: true
		            });
 
	                });
                    </script>		
                </div>
	</body>
</html>

Ce que je souhaite donc, c'est afficher un bouton à côté de mon input qui affiche le calendrier au moment du click.

Mais actuellement, le bouton n'apparaît pas à l'écran, et dès le chargement de la page, j'ai, dans la console d'erreurs, le message cité dans mon premier post.

**MinDBuSteR** · 06/06/2013, 10h41

Modifie cette ligne dans les appels à tes fichiers .js :

Appel à la lib jquery UI : (le chemin est bien entendu à changer)

Code html :

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

1
2
3
4
<!-- JS -->
<script src="/js/jquery-1.9.1.min.js"></script>
<script src="/js/jquery-ui.js"></script>
<script src="/js/bootstrap.min.js"></script>

Au passage préfère faire ton Javascript à l'intérieur de tes balises <head></head>.

**rolandl** · 07/06/2013, 21h09

@MinDBuSteR : Merci beaucoup !

Datepicker - t.datepicker is undefined [UI]

jQuery

Vue hybride

Discussions similaires

Partager

Partager