Question

I am using jquery ui datepicker this way:

$('<input type="text" />').datepicker({
    buttonImage: "http://localhost:2000/proj/styles/calendar/images/calendar/cal.gif"
}).appendTo(container);

This path “http://localhost:2000/proj/styles/calendar/images/calendar/cal.gif” leads to an image. I checked it.

when this code executes, I ends up with working date picker that doesn’t have an icon. If i focusing the text box, a calendar appear.

Why doesn’t the calendar icon show up?

Answer 1

You need to set the showOn option to either button or both for the icon to show up.

Also, I think the datepicker has a hard time adding the icon before the input is on the DOM tree. So, you should consider swap the appendTo() and datepicker() calls:

$('<input type="text" />').appendTo(container)).datepicker({
    buttonImage: "icon url",
    buttonImageOnly: true,
    showOn: 'button'
});

See this in action: http://jsfiddle.net/william/GyP2u/1/.