Integrating ShieldUI Date picker widget with Bootstrap
Incorporating the ShieldUI jQuery Datepicker widget in bootstrap is easy, thanks to its intuitive styling mechanism. We will briefly look at some of the features of the control and see how to include it in the page and integrate it with bootstrap.
The standard date picker control allows navigation and easy selection of dates from a popup, attached on an input control. This comes handy in reservation scenarios, where quick navigation is a must.
1. Include references to all required scripts. Make sure you include the CSS file for your preferred theme.
2. Add an div or span element for which to initialize the DatePicker functionality.
3. Initialize the widget.
To see an example of the control in action, along with all the required code, please refer to the following example.
Subsequent to this, it can be nested in any bootstrap container, such as grid cell or panel.
In addition to its flexible API, the picker components expose client-side events, which track user interactions and allow further custom actions. You can see the available events in the standard picker widget here.
The example below demonstrates nesting an input container, which will later host the date picker, into a panel. The same approach is applicable for a grid, or any other valid Bootstrap container. In addition to this, you can also style each element of the date picker - from the input field, to the popup calendar. This allows the component to blend into the Bootstrap Theme and color palette into which it is being integrated.
<div class="col-lg-4"> <div class="form_hover " style="background-color: #428BCA;"> <p style="text-align: center; margin-top: 20px;"> <i class="fa fa-exclamation-triangle" style="font-size: 147px;"></i><br /> <span style="font-size: 47px;">Select Dates</span> </p> <div class="header" > <div class="blur">lt;/div> <div class="header-text"> <div class="panel panel-success" style="height: 370px;border-bottom:solid 12px #3C763D;"> <div class="panel-heading text-center"> <i class="fa fa-plus" style="font-size: 47px;"></i> </div> <div class="panel-body"> <input id="datepicker" /> </div> </div> </div> </div> </div> </div>