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
Character | Description | Example |
---|---|---|
d | Day of the month, 2 digits with leading zeros | 01 to 31 |
do | The octal day value. Eg: 1st, 2nd, 23rd | 1st to 31st |
D | A textual representation of a day | Mon through Sun |
j | Day of the month without leading zeros | 1 to 31 |
l (lowercase ‘L’) | A full textual representation of the day of the week | Sunday through Saturday |
w | Numeric representation of the day of the week | 0 (for Sunday) through 6 (for Saturday) |
F | A full textual representation of a month | January through December |
m | Numeric representation of a month, with leading zero | 01 through 12 |
M | A short textual representation of a month | Jan through Dec |
n | Numeric representation of a month, without leading zeros | 1 through 12 |
U | The number of seconds since the Unix Epoch | 1413704993 |
y | A two digit representation of a year | 99 or 03 |
Y | A full numeric representation of a year, 4 digits | 1999 or 2003 |