Primefaces日历样式问题

Question

我在项目中使用了primefaces日历，我放置了p：spinner       在日历组件下。当我点击日历组件时       将弹出并显示时间P：微调器组件也出现的日期       在日历里面。    我正在使用primefaces 5.1版本。

 This is the Calendar and p:spinner source code, 

   <h:panelGrid columns="3"> 

   <p:calendar id="locoutPeriodStartDateCalendarId" 
               yearRange="c-70:" showButtonPanel="true" 
               mindate="#{User.accountValidityStartDate}" 
               value="#{User.lockoutPeriodStartDate}" 
               pattern="dd/MM/yyyy HH:mm" navigator="true" 
              showOn="button"   mode="popup"> 
         <p:ajax  update="panelId"/> 

   </p:calendar> 

     <h:outputLabel  value="TO:" /> 

      <p:calendar id="lockoutPeriodEndDateCalendarId" 
                  value="#{User.lockoutPeriodEndDate}" 
                  mindate="#{User.accountValidityStartDate}" 
                  pattern="dd/MM/yyyy HH:mm" 
                  yearRange="c-70:"
                  showButtonPanel="true" 
                  showOn="button"  
                  navigator="true" 
                  mode="popup"> 
        <p:ajax  update="panelId"/> 
        </p:calendar> 
       </h:panelGrid>

    spinner,

  <h:outputLabel  value="workHoursLabel:"/>                      

        <h:panelGrid  columns="4">
        <h:panelGrid  columns="3">

       <p:spinner id="workingHourStartField" 
                   value="#{User.workingHourStartHour}"
                   max="23"    
                   min="0"   
                   size="2"
                   disabled="#{User.fieldsDisabled}" />           

   <p:spinner id="workingHourStartMinute" 
              value="#{User.workingHourStartMinute}"
              max="59"   
              min="0"    
              size="2"
              disabled="#{User.fieldsDisabled}"/>     

    <p:spinner id="workingHourStartSecond" 
               value="#{User.workingHourStartSecond}"
               max="59"   
               min="0"   
               size="2"
               disabled="#{User.fieldsDisabled}"/>

              <h:outputText   value="(HH)" />
              <h:outputText   value="(MM)"  >
              <h:outputText   value="(SS)" />
           </h:panelGrid>

   <h:outputLabel value="To:"/>
          <h:panelGrid  columns="3">

          <p:spinner id="workingHourEndHour" 
               value="#{User.workingHourEndHour}"
               max="23"  min="0"  size="2"
              disabled="#{User.fieldsDisabled}"/>

     <p:spinner id="workingHourEndMinute" 
                value="#{User.workingHourEndMinute}"
                max="59"  
                min="0"  
                size="2"
                disabled="#{User.fieldsDisabled}"/>

      <p:spinner id="workingHourEndSecond" 
                 value="#{User.workingHourEndSecond}"
                 max="59"   
                 min='0'    
                 size="2"
                 disabled="#{User.fieldsDisabled}"/>

             <h:outputText  value="(HH)"/>
             <h:outputText  value="(MM)"/>
              <h:outputText  value="(SS)"/>
            </h:panelGrid>  

   <p:commandLink id="clearButtonId"       
                 styleClass="ui-icon ui-icon-closethick"
                 action="#{User.clearWorkHourAction}"
                 disabled="#{User.fieldsDisabled}"
                 update="panelId"  
                 title="Click to clear">
               </p:commandLink>

            </h:panelGrid>     

以下图片将显示问题。

点击日历后，它将如下所示，

请帮我解决这个问题。谢谢。