How to add a datepicker with bootstrap 3

I wanted to add a datepicker like the image bellow -

So, I searched and found many bootstrap datepicker. But, unfortunately many of those ware not compatible with bootstrap 3. So, I had to go through huge headache. And finally I found this one.

So, what to do with this?

At first - download the zip and extract it.

Then - Copy the extracted folder and paste it inside your bootstrap folder. [ You may create a libs folder inside your bootstrap folder and paste it there too. Which is more structural. ]

Then - examine the folder structure and find two files. One is css (bootstrap-datepicker-master/css/datepicker3.css) and another is js (bootstrap-datepicker-master/js/bootstrap-datepicker.js).

Now - add those files to your html. like so -

    <link rel="stylesheet" type="text/css" href="bootstrap-datepicker-master/css/datepicker3.css">

    <script src="bootstrap-datepicker-master/js/bootstrap-datepicker.js"></script>

Initialize the datepicker -

    <script type="text/javascript">
      $('.datepicker').datepicker();
    </script>

Finally - Add the form group in your form.

              <div class="form-group">
                <label for="dob" class="col-sm-4 control-label">Date of Birth</label>
                <div class="col-sm-8">
                  <input type="text" placeholder="mm/dd/yy" data-date-format="mm/dd/yy" class="datepicker form-control" id="dob">
                </div>
              </div>

To do more pls. read the documentation at - http://bootstrap-datepicker.readthedocs.org/en/release/

Once more, the source file link - https://github.com/eternicode/bootstrap-datepicker

Thank You.