Question

I’m using a jQuery datepicker in WordPress. The datepicker is working fine. But, I can’t get the icon, the little button next to the datepicker’s text input to work. Instead of an icon, I’ve got a tiny little “pill”, an oblong 7px high pellet instead of my icon. If I click it, it functions properly and the datepicker opens.

This what I’ve got:

    $('#mydatepicker').datepicker({

            dateFormat : 'mm/dd/yy',
            yearRange : '2011:2011',
            changeMonth: true,
            changeYear: true,
            defaultDate : new Date(2011, 8-1,1),
            minDate : new Date(2011, 1-1,1),
            maxDate : new Date(2011, 8-1, 25),
            showOn: 'both',
            buttonImage : 'images/calendar_month.png',
            buttonText : ''
}); 

calendar_month.png is a 16×16 px png of a calendar. Images is a subfolder of my plugins’ main folder.

If I remove the ” buttonText : ” ” line, then I get an ellipsis in the “pill”.

Any ideas as to why the icon isn’t showing properly?

Thank you.

Answer 1

In WordPress, an absolute URL can be generated like this: '<?php bloginfo('stylesheet_directory'); ?>/images/calendar.png'

Assuming you have the image folder inside your template’s directory (if you’re building a child-theme and the datepicker belongs to the parent you can use template_directory instead).

You can use Firebug to find out if the image address is currently wrong and what other image it might be displaying. This could definitely help debugging a lot.