In this article I will explain with an example, how to show Calendar Icon (Image) next to TextBox using jQuery DatePicker (Calendar) plugin.
The jQuery DatePicker plugin has a property buttonImage which is used to set the URL if the Icon Image to be displayed next to the TextBox.
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:
showOn – button
The jQuery DatePicker will be shown only when the Button next to the TextBox is clicked.
buttonImageOnly – true
The Button will be an Image.
buttonImage – URL
The URL of the Image file to be displayed as Button.
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({
showOn: 'button',
buttonImageOnly: true,
buttonImage: 'images/calendar.gif',
dateFormat: 'dd/mm/yy'
});
});
</script>
Screenshot
![Show Calendar Icon (Image) next to TextBox using jQuery DatePicker (Calendar)]()
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
