<p:calendar showButtonPanel="true" navigator="true"> Buttons not styled

[co-met]

Hi all,

when I use the calendar component with for example

Code: Select all

<p:calendar showButtonPanel="true" navigator="true" />

the buttons and the drop-down are not styled. It would be nice, if the drop-down and the buttons in the popups footer are styled similar to all other buttons and drop-down.

kind regards
co-met

[mert.sincan]

Navigation elements are native html select tag, the buttons in panel are native html button tag. They are not PrimeFaces components. Therefore, you need to write custom css;

Example for calendar buttons;

Code: Select all

<style type="text/css">
    .ui-datepicker-current,
    .ui-datepicker-close {
        background-color: #3F51B5;
        color: #ffffff;
        border: 0 none;
        -moz-box-shadow: 0 1px 2.5px 0 rgba(0, 0, 0, 0.26), 0 1px 5px 0 rgba(0, 0, 0, 0.16);
        -webkit-box-shadow: 0 1px 2.5px 0 rgba(0, 0, 0, 0.26), 0 1px 5px 0 rgba(0, 0, 0, 0.16);
        box-shadow: 0 1px 2.5px 0 rgba(0, 0, 0, 0.26), 0 1px 5px 0 rgba(0, 0, 0, 0.16);
        -moz-transition: background-color 0.3s;
        -o-transition: background-color 0.3s;
        -webkit-transition: background-color 0.3s;
        transition: background-color 0.3s;
        font-size: 14px;
        height: 30px;
    }
    .ui-datepicker-current:hover,
    .ui-datepicker-close:hover {
        background-color: #283593;
    }
</style>