How To Disable Rich Calendar Using Jquery Or Javascript (client Side)

All is in the question, I want to disable and enable a rich:calendar on the client side (using a javascript fonction for example). xhtml elements:

Solution 1:

I can't find a solution using only jQuery implmentation, so I choose to bind the checkbox value and the disabled calendar attribute on the same boolean :

<rich:calendarid="calendar"disabled="#{!checkboxValue}" /><h:selectBooleanCheckboxid="checkbox"value="#{checkboxValue}"><a4j:supportevent="onclick"reRender="calendar"></a4j:support></h:selectBooleanCheckbox>

There is ajax (I do not want to) does anyone have another solution without ajax ? Without other solution, I'll choose this one as the accepted answer...

Solution 2:

I know this post is very old, but nonetheless I will contribute to it, because I just had the same doubt.

I was able to do it with JQuery. Looking at the generated HTML output I could see that it creates several components. Here's my <rich:calendar>

<rich:calendar id="cal" value="#{myManagedBean.date}" >

As you can see the id is cal. But it's internal <input>'s id is actually calInputDate, so that's the one that I disabled via JQuery, like this:

$('#mainForm\\:calInputDate').prop('disabled', true);

And just use the same logic to enable it again.

$('#mainForm\\:calInputDate').prop('disabled', false);

It works :-)

Share