Easy DatePicker Plugin For Bootstrap - bootstrapDatepickr

What is it?

bootstrapDatepickr is light weight Bootstrap styled datepicker with simple but powerful options. bootstrapDatepickr plays nice on most types of desktop and mobile browsers. The selected date is shown with a "primary" background colour and today's date is shown by a "warning" background colour.

What does it look like?

Here is a live Demo. Try for yourself.

Mobile looks like:

Stop. Where can I get it?

Everything can be downloaded from here

How does it work?

Include both the dist/bootstrapDatepickr-1.0.0.min.css and dist/bootstrapDatepickr-1.0.0.min.js files.

<link rel="stylesheet" href="dist/bootstrapDatepickr-1.0.0.min.css"> <script src="dist/bootstrapDatepickr-1.0.0.min.js"></script>

Then add the input element to trigger the datepicker:

<input id="bootstrapDatepickr" class="form-control" placeholder="Pick a date">

You can also use a bootstrap input-group-addon:

<div class="input-group"> 	<span class="input-group-addon" id="basic-addon1"><i class="fa fa-calendar"></i></span> 	<input type="text" id="bootstrapDatepickr" placeholder="Pick a date" class="form-control"> </div>

Then add the Javascript to target the input element:

<script> 	$(document).ready(function() { 		$("#bootstrapDatepickr").bootstrapDatepickr(); 	}); </script>

Options

There is currently only one option to format the returned date using date_format

Example usage:

<script> 	$(document).ready(function() { 		$("#bootstrapDatepickr").bootstrapDatepickr( 			{ 				date_format: "d-m-Y" 			} 		); 	}); </script>

A list of date format characters is listed below. Note: You can use punctuation to format your date to your liking. Eg: Saturday, 1st of April 2005 would be l, do of F Y