When I click on the box it should open a popup in which you can set both hours and minutes.

This is how it should appears

This is how it usually appears

This is the part of code corresponding to the 2 date boxes

             <div class="ui-g-3">
                            <p:outputLabel for="startHM" value="Dalle ore:" />
                            <p:calendar id="startHM" locale="it" value="#{moduleTimelineView.startEvent}" pattern="HH:mm" timeOnly="true" size="5"
                                        placeholder="08:00">
                                <p:ajax update="endHM" delay="1000" />
                            </p:calendar>
                        </div>
                        <div class="ui-g-3">
                            <p:outputLabel for="endHM" value="Alle ore:" />
                            <p:calendar id="endHM" locale="it" value="#{moduleTimelineView.endEvent}" 
                                        minHour="#{moduleTimelineView.getStartEventHour()}"
                                        maxHour="#{moduleTimelineView.getStartEventHourOffset()}"
                                        pattern="HH:mm" timeOnly="true" size="5" placeholder="13:00">
                            </p:calendar>
                        </div>

I tried to use appendTo=”@(body)” with no results and I also created a js script to try and modify the values of the mask used to set Hours and Minutes and I also tried to modify the style of the ui-datepicker-div in the head of the page, but in both cases the changes seems to get overwritten or ignored even with “!important”. I also saw that It works properly if I adjust my zoom to 67%.