2 problems with p:calendar

[serenne]

Inside a datatable in rowEditMode

<p:dataTable id="eqpTable" var="eqp" value="#{equipmentViewModel.equipments}" editable="true" rowKey="#{eqp.id}" paginator="true" rows="10"
paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"
rowsPerPageTemplate="10,20,50,100"

>

In a column having a p:calendar in the input facet :

<p:cellEditor>
<f:facet name="output">
<h:outputText id="dtlastOut" value="#{eqp.eqpDtLastCalibration}" pattern="#{loginBean.userDateFormat}"/>
</f:facet>
<f:facet name="input">
<p:calendar value="#{eqp.eqpDtLastCalibration}" pattern="#{loginBean.userDateFormat}" timeInput="false" />
</f:facet>
</p:cellEditor>

-1-The calendar button is half displayed on a second line when entering edit mode

-2- strange beavior of the pattern not applied when validating the row (but perhaps not related to template ?

some screenShots to illustrate below :



Kindest regards
Philippe

[mert.sincan]

- First issue;
Please try;

Code: Select all

<p:column headerText="Calendar">
    <p:cellEditor >
        <f:facet name="output">
            <h:outputText id="dtlastOut" .../>
        </f:facet>
        <f:facet name="input">
            <div class="ui-fluid">  // PLEASE ADD THIS LINE
                <p:calendar timeInput="false" showOn="button" .../>
            </div>
        </f:facet>
    </p:cellEditor>
</p:column>

Code: Select all

//CSS
.ui-datatable .ui-state-highlight.ui-row-editing .ui-cell-editor-input .ui-calendar .ui-icon-calendar {
    color: white;
}

- Second Issue;
Please try;

Code: Select all

 <h:outputText id="dtlastOut" ..>
      <f:convertDateTime type="date" pattern="dd-MM-yyyy"/>
 </h:outputText>

[serenne]

Hi Aragorn

Thanks a lot again ...

Second issue : perfect !!

First Issue : perfect (layout OK, css dos not change the gray color of the icon, but I should achieve for that as my primefaces calendar is inside a composite component...)

Kindest regards

Philippe

[mert.sincan]

Glad to hear, thanks a lot for the update!

For the first issue, maybe, you may check my above css in the browser inspector and try the following code;

Code: Select all

//CSS
.MyCalendar.ui-calendar .ui-icon-calendar {
    color: white !important;
}

//xhtml
<p:calendar timeInput="false" showOn="button" styleClass="MyCalendar" .../>