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.

Here is a live Demo. Try for yourself.

Mobile looks like:

Everything can be downloaded from here

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>

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