How to make a jquery datePicker button image unclickable

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 c开发者_开发知识库licked.

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

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!

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

I would use .unwrap(); on the <img> to remove the <a> wrapper. That is if it's wrapped directly in the <a> tag.

Try this:

$("#cal").datepicker("option", "disabled", true);

This works for me -- gotta grab the button and disable it.

$('#MyDatePicker').datepicker({}).next('button').attr('disabled', 'true')