Primefaces Calendar Style Issue - primefaces

Question

I am using primefaces calendar in my project and i placed p:spinner
under calendar component.When ever i click the calendar component it
will pop up and shows date that time P:spinner component also appears
inside the calendar.
i am using primefaces 5.1 version.
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>
The following image will show the issue.
after click calendar it will look like this,
Please help me how to fix this problem.Thanks in advance.