In this article I will explain with an example, how to show jQuery DatePicker Calendar when the Bootstrap FontAwesome Glyphicon Icon is clicked.
Basically, this article will explain how to replace the jQuery DatePicker Calendar Icon with Bootstrap FontAwesome Glyphicon Icon so that when the Bootstrap FontAwesome Glyphicon Icon is clicked, the jQuery DatePicker Calendar is shown.
HTML Markup and jQuery DatePicker implementation
The following HTML Markup consists of a TextBox which has been made Read Only. The TextBox has been assigned Bootstrap classes and is associated with an HTML SPAN element which displays the FontAwesome Glyphicon Calendar Icon.
Inside the jQuery document ready event handler, the TextBox has been applied with jQuery DatePicker plugin and also the HTML SPAN element with class glyphicon-calendar has been assigned with a jQuery Click event handler.
Inside the jQuery Click event handler, the focus function of the jQuery DatePicker is called which displays the jQuery DatePicker Calendar.
The jQuery DatePicker plugin has been assigned following properties:
dateFormat – dd/mm/yy
The jQuery DatePicker will set the selected Date in dd/MM/yyyy date format in TextBox.
<!-- Bootstrap -->
<script type="text/javascript" src='https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js'></script>
<script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js'></script>
<link rel="stylesheet" href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css'
media="screen" />
<!-- Bootstrap -->
<!-- Bootstrap DatePicker -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="Stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
$("#txtDate").datepicker({
dateFormat: 'dd/mm/yy'
});
$('.glyphicon-calendar').click(function () {
$("#txtDate").focus();
});
});
</script>
<div class='container'>
<div class="input-group">
<input id="txtDate" type="text" class="form-control date-input" readonly="readonly" />
<label class="input-group-btn" for="txtDate">
<span class="btn btn-default"><span class="glyphicon glyphicon-calendar"></span></span>
</label>
</div>
</div>
Screenshot
![Using Bootstrap FontAwesome Glyphicon Icon with jQuery DatePicker]()
Browser Compatibility
The above code has been tested in the following browsers.
![Internet Explorer]()
![FireFox]()
![Chrome]()
![Safari]()
![Opera]()
* All browser logos displayed above are property of their respective owners.
Demo
Downloads
