Bootstrap Datepicker

The following are examples of supported markup. On their own, these will not provide a datepicker widget; you will need to instantiate the datepicker on the markup.


The simplest case: focusing the input (clicking or tabbing into it) will show the picker.


Adding the date class to an input-group bootstrap component will allow the input-group-addon elements to trigger the picker.

Date Range

Using the input-daterange construct with multiple child inputs will instantiate one picker per input and link them together to allow selecting ranges.