Use JQuery UI Datepicker with Icons from Jquery UI Theme

Question

I have a datepicker control setup using the JQuery UI, I am also using the JQuery UI themes which provide a bunch of default icons that I want to use.

The DatePicker allows for specifying a specific image, i.e.:

<script type="text/javascript">
  $(document).ready(function() {
    $("#DateFrom").datepicker({ showOn: 'button', buttonImageOnly: true, buttonImage: 'images/ui-icon-calendar.png' });
  });
</script>

To display an icon from the icon set you use something like:

<span class="ui-icon ui-icon-calendar"></span>

Is there an easy to integrate the two or do I just need to hack out the styles/images manually?

Answer 1

I'm afraid you'll have to do that manually. By default, the Datepicker plugin uses the following HTML to insert the specified buttonImage:

<img title="..." alt="..." src="images/ui-icon-calendar.png" class="ui-datepicker-trigger">

By the way, you might want to use...

$(function() {
 // your code here
});

...instead of...

$(document).ready(function() {
 // your code here
});

Answer 2

I got it working by doing this

 $("#DateFrom").datepicker({ showOn: 'button'}).next('button').text('').button({icons:{primary : 'ui-icon-calendar'}});

Just modifies the button that it inserts next to your input for the calendar. By default they throw three ellipses in the text, so I remove that as well.

Answer 3

@Loktar: that worked well. Thanks.