I am new to PrimeFaces and I am trying to center the datepicker. I tried everything( i think) but for some reason I can't get it to work.
I want the datepicker to center on the screen with an overlay behind it (just like a modal) after using the trigger-button. I've tried to use the ui-datepicker:before selector but that doesn't work because the panel needs to close when you click outside the panel.
I've also tried to add a div overlay element before the ui-datepicker with jQuery. But it needs to get triggered on button-click. No AJAX event to check if the panel is open or trigger button is clicked...
Any ideas?
Code: Select all
<div class="p-field p-col-12">
<p:outputLabel for="searchFilterFormDob"
value="Date of birth" />
<div class="ui-inputgroup">
<p:datePicker id="searchFilterFormDob"
value="#{someValue}" showIcon="true"
showOnFocus="false" mask="true" focusOnSelect="true"
placeholder="Date of birth">
</p:datePicker>
</div>
</div>