How to use bootstrap datepicker

Question

Okay  So I m new to using frameworks and js libraries and I m wanting to us bootstrap and bootstrap datepicker for a form and I have no clue if I have the file order correct but the links is how the files are setup  and I know very little about javascript  pretty much all I code in is php but I need this for a form   Here s my testing form for the bootstrap datepicker     lt  DOCTYPE html gt    lt html gt    lt head gt   lt title gt Testing lt  title gt   lt meta charset  utf-8  gt    lt link rel  stylesheet  href   css datepicker css  gt   lt link rel  stylesheet  href   css bootstrap css  gt   lt link rel  stylesheet  href   css bootstrap-responsive css  gt   lt script type  text javascript  src  datepicker bootstrap-datepicker js  gt  lt  script gt    lt  head gt    lt body gt    lt center gt         lt h1 gt BootStrap Datepicker lt  h1 gt     lt form gt     lt div class  well span12 main  gt     lt input type  text  id  dp1  class  span2 datepicker  placeholder  Date                  name  date  gt   lt br gt         lt  div gt         lt input type  submit  value  Search  class  btn  gt     lt  form gt    lt  center gt    lt  -- JAVAscript ----------------------------------------------------------------- gt   lt script type  text javascript  src  jquery js  gt  lt  script gt   lt script type  text javascript  src   js bootstrap-datepicker js  gt  lt  script gt   lt script type  text javascript  src   js bootstrap js  gt  lt  script gt    lt  body gt    lt  html gt    What exactly am I doing wrong

User · Answer

man you can use the basic Bootstrap Datepicker this way:

<!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>

and inside body:

<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 and bootstrap-datepicker.js you can download from here on the Download button below "About" on the left side. Hope this help someone, greetings.

User · Answer

You should include bootstrap-datepicker js after bootstrap js and you should bind the datepicker to your control     function           datepicker   datepicker         format   mm-dd-yyyy

User · Answer

Couldn t get bootstrap datepicker to work until I wrap the textbox with position relative element as shown here    lt span style  position  relative  gt    lt input  type  text  placeholder  click to show datepicker   id  pickyDate   gt   lt  span gt

User · Answer

I believe you have to reference bootstrap js before bootstrap-datepicker js

User · Answer

Just add this below JS file   lt script type  text javascript  gt        document  ready function                 your input s id or class with   or     datepicker               format   dd mm yyyy                       lt  script gt

[javascript] How to use bootstrap datepicker

Examples related to javascript

Examples related to twitter-bootstrap

Examples related to datepicker