šŸ”” Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

bootstrapDatepickr is a tiny, simple-to-use jQuery datepicker plugin for Bootstrap framework that helps users easily input date & time entries.

Bootstrap Date-Picker

Documentation

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

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

You May Also Like