jQuery datepicker. How to insert datepicker.gif after input field

Question

How to insert an image after the input field when using jQuery datepicker?

I expect to use the function: buttonImage.

My jQuery code:

        jQuery('.datepicker').datepicker({
            buttonImageOnly: true,
            buttonImage: 'http://finansraadet.opengate.dk/images/arrowH3.gif',
    //      dayNamesMin: ['man', 'tir', 'ons', 'tor', 'fre', 'lør', 'søn'],
    //      monthNamesShort: ['Jan','Feb','Mar','Apr','Maj','Jun','Jul','Aug','Sep','Okt','Nov','Dec'],
    //      yearRange: '2004:2015',
          changeMonth: true,
          changeYear: true,
          dateFormat: 'dd-mm-yy',
          minDate: new Date(1973, 1 - 1, 1)
        });

In the form there is an input field. But no image end up after it. The datepicker works just fine when clicking the input field.

What to do? Am I using it wrong?

BR. Anders

Answer 1

Try stripping out all the options except for buttonImage. If that works, add them back in one at a time.

If that doesn't work, please post your HTML.

Also, check to make sure you're not calling $.datepicker() twice.

Answer 2

Use the embed option with it. Example:

 // Setup datepicker for Tasks dialog (high z-index) 
 // Start date
 $('.start-date').datepicker({
     showOn: 'button', 
     buttonImageOnly: true, 
     dateFormat: 'yy-mm-dd',
     buttonImage: 'images/calendar.gif',
     beforeShow: function (i, e) {
         var z = 2000;
         e.dpDiv.css('z-index', z);
     }  
  }).addClass("embed");

Answer 3

You are missing the showOn:'button' option. Your code works as is with this option switched on.