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 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.

Answer 2

I suggest putting the image into the input

input.date_picker {   text-align: center;   background-image: url("images/ui-icon-calendar.png");   background-position: right center;   background-repeat: no-repeat;   padding-right: 18px;   width: 78px; } 

Like

I used this icon from the nice tango icons project also available in png

Advantages:

• Independent from javascript
• Loads instantly with the DOM
• Future date inputs easy to add