In this article I will explain with an example, how to show Calendar Icon (Image) next to TextBox using Bootstrap DatePicker (Calendar) plugin.
The Calendar Icon (Image) will be displayed using Calendar Icon with Bootstrap FontAwesome Glyphicon Icon.
When the Bootstrap FontAwesome Glyphicon Icon is clicked, the Bootstrap DatePicker Calendar is shown.
HTML Markup and Bootstrap DatePicker implementation
The following HTML Markup consists of a TextBox which has been made Read Only.
Inside the jQuery document ready event handler, the TextBox has been applied with Bootstrap DatePicker plugin.
The Bootstrap DatePicker plugin has been assigned following properties:
format – dd/mm/yyyy
The Bootstrap DatePicker will set the selected Date in dd/MM/yyyy date format in TextBox.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.glyphicon-calendar
{
font-size: 15pt;
}
.input-group
{
width: 180px;
margin-top:30px;
}
</style>
</head>
<body>
<!-- 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>
<!-- Bootstrap DatePicker -->
<script type="text/javascript">
$(function () {
$('#txtDate').datepicker({
format: "dd/mm/yyyy"
});
});
</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>
</body>
</html>
Screenshot
![Implement Bootstrap DatePicker with Calendar Icon (Image)]()
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
