Bootstrap Datepicker par NufetaksOfficiel - page 1

14 juin 2018 à 14:34:07

Bonjour, j'ai un petit problème, j'utilise (la bibliothèque de CSS) BOOSTRAP, et j'ai créer un formulaire d'inscription, cependant, il y a un bug sur le DATEPICKER de Bootstrap, quand je click sur l'icone (à droite), cela ne fais aucune action, rien ....

Voici mon code :

<html>
  <head>
    <title>Inscription test</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <!-- Derniers CSS compilés et minifiés -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- Thème optionnel -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <!-- Dernier JavaScript compilé et minifié -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
  
  </head>
  <body>

    <div id="main">
      <div class="panel panel-default">
    <div class="panel-body">
      <h1>Création de compte ADMIN</h1>
      <div id="register">
        <p>Saisissez vos informations ci-dessous :</p>
        <hr/>
        <form>

          <div class="form-group">
            <label for="site_label">Site</label>
            <select class="form-control" id="site_label">
              <option selected disabled>MonSite</option>
            </select>
          </div>

          <div class="form-group">
            <input type="text" class="form-control" id="nom_input" placeholder="Entrez votre nom de famille">
          </div>

          <div class="form-group">
            <input type="text" class="form-control" id="prenom_input" placeholder="Entrez votre prénom de famille">
          </div>

          <div class="form-group">
               <div class='input-group date' id='datetimepicker1'>
                   <input type='text' class="form-control" />
                   <span class="input-group-addon">
                       <span class="glyphicon glyphicon-calendar"></span>
                   </span>
               </div>
           </div>

        </form>
      </div>
      </div>
</div>

Merci d'avance

PaulTanné

14 juin 2018 à 15:08:22

Yo,

Pas besoin de dire que c'est un bug si ca ne marche pas hein, surtout que la c'est totalement normal parce que ou est ce que tu appelle datepicker ici??

Regarde ici, tu verra la difference avec ton code :)

https://jqueryui.com/datepicker/#icon-trigger

EmmanuelBeziat

14 juin 2018 à 16:35:50

Salut,

Appelle ton CSS après celui de bootstrap, pas avant.

Ensuite, à ce que je sache, il n'y a aucun datepicker dans Bootstrap. Par contre, les navigateurs proposent une gestion des champs de type date, maintenant, avec un datepicker natif :

<input type="date">

PaulTanné a écrit:

c'est totalement normal parce que ou est ce que tu appelle datepicker ici??

Regarde ici, tu verra la difference avec ton code :)

https://jqueryui.com/datepicker/#icon-trigger

Moui, sauf qu'il n'uytilise pas jQuery-ui, et que je déconseille vraiment de surcharger sa page avec cette horreur ; bootstrap est déjà assez lourd comme ça, et s'appuie sur jQuery (qui est lui aussi suffisamment lourd comme ça) alors qu'il serait largement temps d'en abandonner le support…

-
Edité par EmmanuelBeziat 14 juin 2018 à 16:36:51

Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !

PaulTanné

14 juin 2018 à 18:55:05

rhooManu a écrit:

Moui, sauf qu'il n'uytilise pas jQuery-ui

Ouai mais vu qu'il parlais de datepicker jpensais qu'il connaissait deja un peu le delire,

par contre il y a deux appel de script jquery.min, c'est pas good ca je crois non?

EmmanuelBeziat

14 juin 2018 à 21:31:35

En effet, un seul suffit. Et il faut appeler jQuery AVANT bootstrap.

Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !

NufetaksOfficiel

15 juin 2018 à 9:09:16

Donc, j'ai mis d'abord appeler jQuery AVANT bootstrap, ensuite j'ai appelé bootstrap AVANT mon CSS. Mais j'ai toujours le problème de datepicker, rien ne s'affiche quand je clique sur l'icone.

rhooManu a écrit:

Ensuite, à ce que je sache, il n'y a aucun datepicker dans Bootstrap.

@rhooManu : https://eonasdan.github.io/bootstrap-datetimepicker/

EmmanuelBeziat

15 juin 2018 à 13:36:46

NufetaksOfficiel a écrit:

rhooManu a écrit:

Ensuite, à ce que je sache, il n'y a aucun datepicker dans Bootstrap.

@rhooManu : https://eonasdan.github.io/bootstrap-datetimepicker/

Oui, c'est un plugin externe, fait par quelqu'un d'externe, parce qu'il n'y a aucun datepicker dans bootstrap.

Mais encore une fois, tu n'as pas besoin de plugin, les datepickers sont natifs sur tous les navigateurs modernes. Je t'ai montré comment.

Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !

Bootstrap Datepicker

Supprimer

Modérer

Signaler le message aux modérateurs