In this article I will explain with an example, how to show Calendar Icon (Image) next to TextBox using
Bootstrap DatePicker (Calendar) plugin in HTML.
The Calendar Icon (Image) will be displayed using Calendar Icon with
Bootstrap Glyphicon Icon.
HTML Markup
Inside the HTML Markup, first the following CSS files are inherited.
1. bootstrap.min.css
2. bootstrap-datepicker.css
And then, the following JS script files are inherited.
1. jquery.min.js
2. bootstrap.min.js
3. bootstrap-datepicker.js
The following HTML Markup consists of:
TextBox – For displaying DatePicker.
The TextBox has been assigned with Read Only attribute.
SPAN – For displaying
Bootstrap Glyphicon Calendar Icon.
The Calendar Icon is displayed using the glyphicon-calendar Glyphicon class.
<!-- Bootstrap -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- 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 -->
<div class="form-group" style="margin: 30px">
<div class="input-group date" style="width: 200px">
<input type="text" name="selectedDate" id="txtDate" class="form-control" />
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
</div>
Bootstrap DatePicker Plugin implementation
Inside the
jQuery document ready event handler, the TextBox has been applied with
Bootstrap DatePicker plugin.
The
Bootstrap DatePicker plugin has been assigned with following property:
format – dd/mm/yyyy
The
Bootstrap DatePicker will set the selected Date in dd/MM/yyyy date format in TextBox.
<script type="text/javascript">
$(function () {
$('#txtDate').datepicker({
format: "dd/mm/yyyy"
});
});
</script>
Screenshot
![Implement Bootstrap DatePicker with Calendar Icon (Image)]()
Demo
Downloads
