PrimeFaces Calendar disabled, but doesn't look disabled

Question

I am using PrimeFaces6.1 widgetVar to disable various page elements. I have several different types of elements on the page. When they are all disabled, p:calendar is the only element that doesn't look disabled.

<p:calendar id="revision-date-from" value="#{search.revisionDateFrom}" pattern="dd/MM/yyyy" mask="true" />---<p:calendar id="revision-date-to" value="#{search.revisionDateTo}" pattern="dd/MM/yyyy" mask="true" />

I'm required to develop for Internet Explorer 11.

Does anyone else have this issue? Or may know how to solve this? I guess, I could always play with the styling to change the bgcolor. But it does seem odd that PrimeFaces would have this one outlier.

Click here to see the image of elements p:calendar, p:inputText and p:selectOneMenu together

Why are you using client side widgetVar to disable the fields? Although, you can use disabled attribute on each of the fields! — Parkash Kumar
I considered both ways. The page that I'm working on has a lot of enabling and disabling of page elements (28 total elements) based on a combination of checkbox selections (14 checkboxes). Doing this client side reduced the complexity of the implementation and I imagine will be more efficient since calls aren't going back to the server. — J. Van
Keep in mind that disabling client-side opens up a security hole. Clients can enable it!!! — Kukeltje

J. Van J. Van · Accepted Answer · 2017-10-24T17:59:08

I was able to solve this issue: After doing research I learned that disabled PrimeFaces elements use a style class called 'ui-state-disabled' to assign a percentage of Opacity. Inspecting the calendar element I discovered that 'ui-state-disabled' class was never assigned. So, to solve my issue I overrode the class in my stylesheet. Well, didn't 'need' to do this, but I wanted to have control over all my disabled elements Opacity.

.ui-state-disabled {
    opacity: 0.45;
    filter: Alpha(Opacity=45);
    cursor: default !important;
}

Using my widgetVar to disable I needed to add the class:

PF('widget_date').disable();
PF('widget_date').getJQ().addClass('ui-state-disabled');

Then to enable and remove the class:

    PF('widget_date').enable();
    PF('widget_date').getJQ().removeClass('ui-state-disabled');

This solution worked perfectly.

PrimeFaces Calendar disabled, but doesn't look disabled

1 Answers