web-dev-qa-db-fra.com

Le datepicker de JQuery ne fonctionne pas

Bonne journée!

J'essaie d'utiliser jQuery pour la première fois. Et je ne peux pas le faire fonctionner . Mon code est le suivant:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<script>
    $(function() {
        $( "#datepicker" ).datepicker();
    });
    </script>
    <div class="demo">
    <p>Date: <input type="text" id="datepicker"></p>
    </div><!-- End demo -->
</body>
</HTML>

Mais le datepicker ne fonctionne pas .. Que dois-je faire pour le faire fonctionner? Merci.

jqueryjquery-uijquery-ui-datepicker
9
newbie

Vous n'avez pas inclus la bibliothèque datepicker

alors ajoutez 

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>

à votre tag <head>

démo en direct

25
Raynos

Datepicker ne fait pas partie de jQuery. Vous devez obtenir jQuery UI pour utiliser le datepicker.

8
Peter Olson

Le problème est que vous ne créez pas de lien vers la bibliothèque de l'interface utilisateur jQuery (c'est là que réside datepicker):

http://jsfiddle.net/5AkyC/

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js"></script>
<script>
$(function() {
    $( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
    <div class="demo">
    <p>Date: <input type="text" id="datepicker"></p>
    </div><!-- End demo -->
</body>
</HTML>
6
Jared Farrish

J'étais coincé sur un problème où datepicker () semblait ne rien faire. Il s'est avéré que le problème était que l'entrée se trouvait dans un div Bootstrap "input-group". Le simple fait de supprimer les entrées du groupe d’entrée a résolu le problème.

3
Mike Gostomski

Pour moi, le problème était que l’ancre avait besoin d’un titre, et cela manquait!

2
bcm

essayez d’ajuster l’ordre dans lequel votre script s’exécute. Placez la balise de script sous l’élément qu’elle essaie d’affecter. Ou laissez-le en haut et enveloppez-le dans $(document).ready() EDIT: Et incluez le fichier de droite.

0
Michael Jasper

Si datepicker de l'interface utilisateur jQuery ne fonctionne pas mais qu'il fonctionnait auparavant sur un DOM similaire, essayez de supprimer toutes les classes et essayez de le lier à une simple entrée avec son ID. Dans mon cas, une classe interférait avec elle et empêchait le sélecteur de date d'apparaître.

0
Mohd Abdul Mujib

après tout tout le HTML, nous voulons écrire ces lignes de code

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css" type="text/css" media="all">



<script>
$('#date').datepicker({
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    yearRange: "-100:+0",
    dateFormat: 'dd/mm/yy'

});
</script>
0
Ambala Chandrashekar