2010-05-12 10 views
9

Je ne parviens pas à afficher le datepicker jQuery comme indiqué ici: http://jqueryui.com/demos/datepicker/datepicker jQuery UI ne sera pas affiché - code complet inclus

Je crois que je téléchargé tous les fichiers appropriés, mais pour être certain, j'ai commencé à partir de zéro et déchiré le site de démonstration. Pas tout, mais ce que je croyais être les parties importantes. Le résultat est aucun datepicker à afficher et aucune erreur javascript. Voici mon exemple complet de code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<link rel="stylesheet" href="http://static.jquery.com/ui/css/base2.css" type="text/css" media="all" /> 
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css" type="text/css" media="all" /> 
<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" media="all" /> 


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> 
<script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script> 

<script type="text/javascript" charset="utf-8"> 
jQuery(function(){ 
    jQuery("#datepicker").datepicker(); 
}); 
</script> 
</head> 
<body> 
<input type="text" id="datepicker" class="hasDatepicker" /> 
</body> 
</html> 

Toute aide serait grandement appréciée. Merci!

Répondre

26

Veuillez supprimer la classe hasDatepicker de la balise d'entrée et cela devrait fonctionner correctement.

class = 'hasDatepicker' //Need to remove 
+2

Oui, ce nom de classe est utilisé par jquery-ui pour indiquer qu'une datepicker a déjà été ajoutée. – interjay

+3

La classe hasDatepicker est automatiquement ajoutée par l'interface utilisateur jQuery lorsque vous appelez la fonction datepicker. Le mettre en soi gâche les choses. – Adam

+0

Devinez je n'aurais pas dû déchirer le code. Je vous remercie! –

3

Si vous regardez attentivement le code source de jQuery UI lib vous pouvez voir qu'il utilise la classe hasDatepicker à l'intérieur pour datepicker. Donc, utilisez une autre classe (même hasdatepicker œuvres), mais pas hasDatepicker:

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

ou:

<input type="text" id="datepicker" class="hasdatepicker"/> 
0

J'ai eu la question similaire. Ma résolution était d'ajouter z-index dans .date-picker de datePicker.css

.date-picker { 
position: absolute; 
z-index:1000;/*********** MY Change *************/ 
font-size: 1em; 
color: #CCC; 
text-align: center; 
cursor: default; 

border: 1px solid #444; 
border-radius: 2px; 
margin: 6px 0; 
background: #222; 
box-shadow: 8px 8px 12px rgba(0, 0, 0, 0.2);} 

Ca y est !!! Et Lo le sélecteur de date a commencé à afficher. J'espère que cela aide quelqu'un qui est venu ici pour des problèmes similaires.