Adding an Image on JQuery's datepicker Widget

Sample Output



Code

HTML:

<input id="startDate" name="startDate" type="text" />

JQuery:

$('#startDate').datepicker(
 {
 'showOn':'both',
 'buttonImage':'[INSERT-IMAGE-LOCATION]',
 'buttonImageOnly':true}
);

CSS for styling

img.ui-datepicker-trigger{
 vertical-align:middle;
 padding-left:5px;
 padding-bottom:4px;
}

Note

Be sure to add the following scripts:
a) jquery
b) jquery.ui.core.js
c) jquery.ui.widget.js
d) jquery.ui.datepicker.js