Question

I’m trying to attach a JQuery datepicker to a text field on a form, but I’m not sure how to use the icons that come with the JQuery download.

I have all of the stylesheets in my app/assets/stylesheets folder and there is a subfolder called images which I have also put in the stylesheets folder. I saw a different StackOverflow post saying that I shouldn’t put those images into my app/assets/images folder.

Then in my .coffee file I have

$ -> $('.datepicker').datepicker({
    buttonImageOnly : true,
    buttonImage : "calendar.gif",
    showOn : "button"
    })  

The problem is that I don’t have a file called calendar.gif. I’ve seen a lot of examples for buttonImage and all of them reference files that I don’t have. What I do have is several .png files that seem to have all of the icons for the theme in them. Is there something else that I am supposed to download or am I putting the big .png file in the wrong place?

I have tried so many different values for buttonImage that I wont bother to list them all. Here is a selection of stuff I’ve tried:
ui-icon-calendar
images/ui-icon-calculator.png
images/.ui-icon-calculator.png
images/ui-icon-calculator
Any help is greatly appreciated.

Answer 1

I think you’re asking about using the datepicker field with the icon trigger. This variant is demonstrated on this page:
http://jqueryui.com/demos/datepicker/#icon-trigger

If this is the case, it appears that the icon image is not an asset that is included with jQuery UI. You will need to create or find a calendar icon.