web-dev-qa-db-fra.com

Comment utiliser bootstrap datepicker

Bon, donc je suis nouveau dans l'utilisation des frameworks et des bibliothèques js et je veux nous bootstrap et bootstrap datepicker pour un formulaire et je n'ai aucune idée) si l'ordre des fichiers est correct mais que les liens indiquent comment les fichiers sont configurés, et que je connais très peu de javascript, à peu près tout ce que je code est en php mais j'en ai besoin pour un formulaire.

Voici mon formulaire de test pour le bootstrap datepicker:

 <!DOCTYPE html>
 <html>
 <head>
<title>Testing</title>
<meta charset="utf-8">

<link rel="stylesheet" href="_css/datepicker.css">
<link rel="stylesheet" href="_css/bootstrap.css">
<link rel="stylesheet" href="_css/bootstrap-responsive.css">
<script type="text/javascript" src="datepicker/bootstrap-datepicker.js"></script>
 </head>
 <body>
 <center>
      <h1>BootStrap Datepicker</h1>
  <form>
  <div class="well span12 main">
  <input type="text" id="dp1" class="span2 datepicker" placeholder="Date..."  
           name="date"> <br>
      </div>
      <input type="submit" value="Search" class="btn">
  </form>
 </center>

<!-- JAVAscript ----------------------------------------------------------------->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="_js/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="_js/bootstrap.js"></script>
 </body>
 </html>

Qu'est-ce que je fais exactement mal?

javascripttwitter-bootstrapdatepicker
19
user2701687

Vous devez inclure bootstrap-datepicker.js après bootstrap.js et vous devez lier le datepicker à votre contrôle.

$(function(){
   $('.datepicker').datepicker({
      format: 'mm-dd-yyyy'
    });
});
27
Teja Kantamneni

Je pense que vous devez référencer bootstrap.js avant bootstrap-datepicker.js

2
Colt Stumpf

l'homme, vous pouvez utiliser le Bootstrap Datepicker de cette façon:

<!DOCTYPE html>
<head runat="server">
<title>Test Zone</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="Css/datepicker.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="../Js/bootstrap-datepicker.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#pickyDate').datepicker({
            format: "dd/mm/yyyy"
        });
    });
</script>

et à l'intérieur du corps:

<body>
<div id="testDIV">
    <div class="container">
        <div class="hero-unit">
            <input  type="text" placeholder="click to show datepicker"  id="pickyDate"/>
        </div>
    </div>
</div>

datepicker.css et bootstrap-datepicker.js que vous pouvez télécharger depuis - ici sur le bouton Télécharger sous "A propos" sur le côté gauche. J'espère que cela aide quelqu'un, salutations.

2
JCO9

Ajoutez simplement ceci sous le fichier JS

<script type="text/javascript">
    $(document).ready(function () {
        $('your input's id or class with # or .').datepicker({
            format: "dd/mm/yyyy"
        });
    });
</script>
0
Fahad Shakeel