3 Demos of Bootstrap datepicker with jQuery

The Bootstrap date picker

By using the bootstrap-datepicker plug-in, you may create a simple date picker that opens up as the input text field is selected or a component date picker that displays the calendar with text field focus as well as an icon ahead of it.

You may also create the date range selectors as using this bootstrap-datepicker plug-in. You may also use it as an embedded component in a container like div element.

Demo1 Demo2 Demo3
Developer page Download plug-in

Installing and using the datepicker plug-in

The jQuery-based datepicker plugin for Bootstrap can be installed via npm or yarn as follows:

Via npm:

$ npm install bootstrap-datepicker

Via Yarn:

yarn add bootstrap-datepicker

The plug-in can also be installed by old-fashioned way i.e. download the zipped file from above download link and place the required bootstrap-datepicker3.css and bootstrap-datepicker.min.js files in the appropriate location and refer both to the web pages where you want to use it. For example:

In the <head> section:

<link href=”css/bootstrap-datepicker3/bootstrap-datepicker3.css” rel=”stylesheet” type=”text/css”>

Before the </body> tag and after jQuery and Bootstrap:

<script src=”https://code.jquery.com/jquery-1.12.4.min.js”></script>

<script src=”http://netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js”></script>

<script src=”js/bootstrap-datepicker3/bootstrap-datepicker.min.js”></script>

Initiate the plug-in via JavaScript:

$(‘.dtpicker-demo’).datepicker();

You may set different available options there. See the demos below for learning how to use the markup and setting up the plug-in.

A demo of component datepicker

In this demo, a component date picker is created. You can see a text input field along with an icon ahead of it. Clicking inside the text field or icon will open the calendar. Select the date and calendar will close itself. See it by yourself:

Bootstrap datepicker

See online demo and code

The markup:

 

The script:

 

The autoclose option for this demo is kept true. If you set it as false, then the calendar will not close after selecting the date. You have to click somewhere else to get it closed.

A demo of range date picker

For this demo, two input boxes are used for selecting the date range. The first one is for the “From Date” and the second is for the “To Date” selection. For this demo, the autoclose option is set as true just like the above example:

Bootstrap date range datepicker

See online demo and code

The markup:

 

The script:

 

An embedded or inline calendar example

An inline or embedded calendar can be created by specifying the container where you intend to display the calendar component in your web page. See this example, where a div element is created with a class. The class name is referred in the JavaScript for initiating the jQuery date picker plug-in. The calendar will display in that div as the page loads:

Bootstrap datepicker embeded

See online demo and code

The markup:

 

The script:

A few useful options available for date picker

The date picker Bootstrap component has a few useful options that you may set as initiating the plug-in via JavaScript. These include:

  • calendarWeeks: true //Will display the Weekday names
  • todayHighlight: true //It will highlight the today’s date
  • autoclose: true //The calendar will close after selecting the date
  • datesDisabled: [’05/06/2017′, ’05/21/2017′] //Disable the dates
  • orientation: “top right” //Specify the calendar orientation. The possible values are auto, top auto, bottom auto, auto left, top left, bottom left, auto right, top right, bottom right.
  • And few others

Learn more about this nice date picker by visiting the developer page.