How to make a jquery datePicker button image unclickable

Question

I have a jquery UI datePicker in my page. I have a text box on which the date is displayed. The code is:

$("#cal").datepicker({
    minDate: new Date(),
    defaultDate: new Date(),
    buttonImage:
        '/images/calendar.gif',
    constrainInput: false,
    closeText: 'Close',
    showButtonPanel: true,
    showButtonText: 'Choose a date', 
     buttonImageOnly : true,
    showOn : 'button'
});
$("#till").datepicker('setDate', today);

I want to disable this on some conditions. I use the following code to disable:

 $("#cal").datePicker('disable');

It blacks out the text box but the image is still clickable. The problem is in IE, the date picker pop up comes up but does not close when the image button associated with the date picker is clicked.

I also tried to bind a onclick function with the image to make it non-clickable. But that does not work as well.

How can make the date picker image button non-clickable when the date picker is disabled.

Any help would be appreciated.

Thanks, Farzana

Answer 1

I'm not sure if it will work, but you should try to change the showOn property right after the disable call.

$("#cal").datepicker('disable');
$("#cal").datepicker( "option", "showOn", 'focus' );

Give it a try!

Answer 2

why dont you hide the button itself by .hide() or adding class or style

or you can add style to make it disable

.addClass or .add to add css