11548 sujets

JavaScript, DOM et API Web HTML5

Jquery et datepicker créé une div a vide.

Bonjour tout le monde.

J'ai un problème sur lequel je bute depuis quelques temps.
Je suis en train de développer un site en utilisant les frameworks JQuery et Zend.
Donc je maitrise très bien Zend et JQuery ne m'a posé de grosse difficultés. Seulement, j'ai quand même un problème qui reste bloquant à quelques jours de la sortie du site.

J'ai voulu utiliser le DatePicker de JQuery et voici le code que j'ai utilisé : 

<!DOCTYPE html>
<html>
<head>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
  
  <script>
  $(document).ready(function() {
    $("#datepicker").datepicker();
  });
  </script>
</head>
<body style="font-size:62.5%;">
  
<div type="text" id="datepicker"></div>

</body>
</html>


Cela marche mais me créer une sorte de div à vide hors de mon html.... C'est bizarre comme si la div était hors flux, mais quand même interprété. Du coup ça détruit mon footer.
Mais dès que je rentre sur ma saisie de date, le datepicker se déploie et la div du bas disparait complètement. Enfin bref, ça casse un peu ma présentation d'avoir une div ingérable en bas, même temporairement.

Quelqu'un a déjà rencontré le problème ?

Merci de vos réponses. Smiley langue
A la base, le datepicker c'est fait pour un input. Sur un div tu en fais quoi ?

Tu as peut être une collision avec ton css.
J'ai jamais eu ce problème.
Regarde avec firebug ou équivalent à quel niveau il est inséré et les classes css qui s'y rapportent.
Et c'est là la claque !!!!! Parce que j'ai testé avec firebug et cette fameuse DIV n'est pas reconnu dans le code (impossible à selectionner) et l'outil de dev d'Opera la même....
Je ne sais pas si ça t'aidera, mais voici comment je l'utilise et ça fonctionne très bien...


<html>
<head>
<link type="text/css" href="css/ui-darkness/jquery-ui-1.8.1.custom.css" rel="stylesheet" />		
    <script type="text/javascript" src="includes/js/jquery-142.js"></script> // Jquery
    <script type="text/javascript" src="includes/js/uicore.js"></script> // JQuery UI Core nécessaire à l'exécution du DatePicker
    <script type="text/javascript" src="includes/js/datepicker-fr.js"></script> // Pack langue FR de DatePicker
    <script type="text/javascript">
      $(document).ready(function(){
        $("#date_debut").datepicker({constrainInput: true, dateFormat: 'dd/mm/yy', minDate: +1, maxDate: '+2y'}); // datePicker avec options
      });
    </script>
</head>
<body>
  Date du projet <input type="text" name="debut" id="date_debut" style="width:70px" maxlength="10" />
</body>
</html>
Salut,

Je ne sais pas si tu as trouvée la solution, mais la voici :

- Ajoute dans ton CSS, le code suivant :

#ui-datepicker-div {
    display:none;
}


Testé et cela fonctionne.

Cordialement.
Sujet clos
Aller à