'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 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



Solution 1:[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!

Solution 2:[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

Solution 3:[3]

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

Solution 4:[4]

Try this:

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

Solution 5:[5]

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

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 GinoVives
Solution 2 zod
Solution 3 Jonny Sooter
Solution 4 Drazzah
Solution 5 George Beier