Primefaces calendar component show only month and year

I just hid the table of the day picker with CSS. I also had to create my own arrows for navigating, because the standard arrows do not fire the dateSelect event.

Markup:

<p:commandButton actionListener="#{bean.decrementMonth}"
    id="navLeft" update="[your components]" icon="ui-icon-triangle-1-w" />

<h:panelGroup class="tableView">
    <p:calendar value="#{bean.selectedDate}" mode="inline" />
</h:panelGroup>

<p:commandButton actionListener="#{bean.incrementMonth}"
    id="navRight" update="[your components]" icon="ui-icon-triangle-1-e" />

CSS:

.tableView table,
.tableView a.ui-datepicker-prev,
.tableView a.ui-datepicker-next {
    display: none;
}

Bean methods:

public void decrementMonth() throws Exception {  
    Calendar c = Calendar.getInstance();
    c.setTime(this.selectedDate);
    c.add(Calendar.MONTH, -1);

            //... business logic to update date dependent data
}  

public void incrementMonth() throws Exception {  
    Calendar c = Calendar.getInstance();
    c.setTime(this.selectedDate);
    c.add(Calendar.MONTH, 1);

            //... business logic to update date dependent data
}  

Result (PrimeFaces 3.4.2):

PrimeFaces calendar modified to show only month and year


PrimeFaces don't have month year picker component as such. So if you want to use jQuery based external component then checkout jQuery.mtz.monthpicker

Tags:

Primefaces