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.

Getting started

The underling elements from which the widget can be created is html input. In order to render the DatePicker JavaScript widget on a webpage, you need to:
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.

<!DOCTYPE html>
<html>
<head>
<title>Shield DatePicker</title>
<meta charset="utf-8" />

<link rel="stylesheet" type="text/css" href="css/shieldui-all.min.css" />
<link rel="stylesheet" type="text/css" href="css/light/all.min.css" />
<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="js/shieldui-all.min.js" type="text/javascript"></script>

</head>
<body>

<input id="datepicker" />

<script type="text/javascript">
    $(function () {
        $("#datepicker").shieldDatePicker({
            
        });
    });
</script>

</body>
</html>

To see an example of the control in action, along with all the required code, please refer to the following example.

Bootstrap Integration

The ShieldUI jQuery datepicker control is easy to integrate into Bootstrap. The only requirement is to include all the required css and JavaScript resources, which are needed to initialize the widget.
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>