Javascript – Use JQuery UI Datepicker with Icons from Jquery UI Theme

cssjavascriptjquery-ui

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?

Best Solution

I got it working by doing this

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

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.