PrimeFaces Watermark混入ColumnToggler表头的解决方法问询

The core issue here is that PrimeFaces' ColumnToggler pulls all content from the <f:facet name="header"> of your column—including the Watermark component you added. That’s why its text is showing up in the column selection menu and causing visual clutter. Here are two clean fixes that avoid the extra overhead you wanted to skip:

1. Use Calendar's Built-in Placeholder (Recommended) #

PrimeFaces' Calendar component natively supports a placeholder attribute, so you don’t need the Watermark component at all. This eliminates the extra element in your header facet entirely, keeping the ColumnToggler clean.

Modify your column code like this:

<p:column id="analysisStartTimeColumn" filterBy="#{analysis.startTime}" sortBy="#{analysis.startTime}" filterFunction="#{filterController.filterByDate}" filterMatchMode="contains" visible="#{analysisBean.analysesDatatableColumnStates.get(6)}">
    <f:facet name="header">
        <h:outputText value="#{msg['Analysis.startTime']}"/>
        <!-- Remove the p:watermark component from here -->
    </f:facet>
    <f:facet name="filter">
        <p:calendar id="analysisStartTimeCalendar" locale="de" navigator="true" pattern="dd.MM.yyyy" mask="true"
                    placeholder="#{msg['placeholder.chooseDate']}"> <!-- Add placeholder directly to Calendar -->
            <p:ajax event="dateSelect" oncomplete="PF('analysesDatatableWdgtVar').filter()"/>
        </p:calendar>
    </f:facet>
    <h:outputText value="#{analysis.startTime}">
        <f:converter converterId="localDateTimeConverter"/>
        <f:attribute name="pattern" value="dd.MM.yyyy HH:mm:ss"/>
    </h:outputText>
</p:column>

This achieves the exact same placeholder effect for your date filter, but keeps your header facet focused solely on the column title. No changes to form paths or custom exporters required!

2. Hide Watermark in ColumnToggler with CSS (If You Must Keep Watermark) #

If you prefer to stick with the Watermark component for some reason, you can target it specifically in the ColumnToggler and hide it with CSS.

First, add a custom style class to your Watermark:

<p:watermark value="#{msg['placeholder.chooseDate']}" for="analysisStartTimeColumn" styleClass="column-filter-watermark"/>

Then add this CSS to your page or stylesheet:

/* Hide the watermark only within the ColumnToggler menu */
.ui-column-toggler .column-filter-watermark {
    display: none;
}

This will keep the Watermark visible in the column header’s filter area, but hide it from the ColumnToggler’s selection list.

内容的提问来源于stack exchange，提问作者Matze.N