How to use bootstrap datepicker

How to use bootstrap datepicker

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:



Testing




BootStrap Datepicker







What exactly am I doing wrong?

Solutions/Answers:

Solution 1:

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'
    });
});

Solution 2:

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

Solution 3:

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>

Related:  How can I make space between two buttons in same div?

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.

Solution 4:

Just add this below JS file

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

References