The below code snippet explains how to trigger jQuery UI DatePicker with Image Button.
<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