Two pe:Timepicker inside a p:DataTable

[rubenlins]

Hi, guys!

I have a editable p:DataTable with two pe:timepicker, each one in a p:column, like below:

Code: Select all

                       <p:dataTable value="#{gerirTurnoTrabalho.expedientes}"
				var="exp" editable="true" style="max-width: 300px; max-height: 150px; min-height: 100px; margin-top: 5px">
			
				<p:column headerText="Início" width="40%">
					<p:cellEditor>
						<f:facet name="output">
							<h:outputText value="#{exp.strHorarioInicio}"/>
						</f:facet>
						<f:facet name="input">
							<pe:timePicker mode="spinner" showOn="button" value="#{exp.inicio}" timeSeparator=":"/>
						</f:facet>
					</p:cellEditor>
				</p:column>
				
				<p:column headerText="Término" width="40%">
					<p:cellEditor>
						<f:facet name="output">
							<h:outputText value="#{exp.strHorarioFim}"/>
						</f:facet>
						<f:facet name="input">
							<pe:timePicker mode="spinner" showOn="button" value="#{exp.fim}" />
						</f:facet>
					</p:cellEditor>
				</p:column>

				<p:column width="10%">
					<p:rowEditor/>
				</p:column>
				
				<p:column width="10%">
					<p:commandButton id="excluirOcupacaoButton" icon="ui-icon-trash"
							onclick="$('#cod#{turno.codigo}').click(); PF('excluirOcupDlg').show();"
							style="width: 20px; height: 20px" />
					<pe:tooltip for="excluirOcupacaoButton"
						value="Excluir Turno de Trabalho" />
				</p:column>

			</p:dataTable>

The problem is that only the first pe:Timepicker shows the button panel to select hours and minutes.