The below code snippet explains how to implement jQuery UI Datepicker with Image Icon to trigger the jQuery UI Datepicker.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type = "text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type = "text/javascript"></script>
<link href="http://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: 'http://jqueryui.com/resources/demos/datepicker/images/calendar.gif'
});
});
</script>
<input type = "text" id = "txtDate" />
Explanation:
In the above code snippet in the document ready event handler of jQuery simple datepicker has been applied to HTML input textbox txtDate. In the jQuery UI Datepicker function the below three properties have been specified.
1. showOn – The trigger type here button as we want to display Image Icon
2. buttonImageOnly – Since we want to display image icon, this property needs to be set to true
3. buttonImage - URL of the image icon
Demo
View Demo