In this article I will explain with an example, how to display Calendar Icon (Image) inside TextBox when using the jQuery DatePicker plugin.
This feature is not available in the jQuery DatePicker plugin and hence the in order to display Calendar Icon (Image) inside TextBox, CSS will be used.
HTML Markup and jQuery 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 jQuery DatePicker plugin.
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.
<input type="text" id="txtDate" name="SelectedDate" readonly="readonly" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.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'
});
});
</script>
CSS styles for displaying the Calendar Icon (Image) inside TextBox
The TextBox has been assigned the following CSS style in which the Calendar Icon (Image) has been set as the Background of the TextBox.
<style type="text/css">
#txtDate
{
background: url('images/calendar.gif') no-repeat;
border:1px solid #ccc;
height:18px;
width:100px;
padding-left:25px;
}
</style>
Screenshot
![jQuery DatePicker: Display Calendar Icon (Image) inside TextBox]()
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
