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

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

• javascript
• jquery
• jquery-ui
• datepicker

Share Improve this question Follow asked Oct 5, 2010 at 18:59 FarzanaFarzana 6111 gold badge11 silver badge22 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 0

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