Show only month and year in Primefaces Legend

Question

Like remover os dias of the primefaces?

I tried the configuration below, but the days are displayed when the component is redeveloped.

<p:calendar id="dataTeste" pattern="MM/yyyy" />

Here’s the rendered component image:

Answer 1

The Primefaces component does not natively support this.

Options would be:

• Customize the component (as in this SOEN response).
• Using a third-party plugin like monthPicker (indicated in the question cited), applying it in a native text box of Primefaces.
• Build your own JSF component (maybe using the previous item plugin).

However, unless the visual issue is something much needed, perhaps a simpler solution is recommended. Simply use a combo with the possible date range, each item containing mês/ano. Or even two combos, one with month and one with year.

Particularly, I see no advantage as a user in having to press arrows to advance or back the month as it takes more work if I want to go to a date further away.

Answer 2

Old topic, but I’ll leave an alternative solution that uses javascript and CSS to solve this problem...

OBS: Tested in Primefaces 5.2...

function setData(){
  ano = $("#data .ui-datepicker-year").val();
  mes = $("#data .ui-datepicker-month").val();
  $('#data_input').val(('0' + (++mes)).slice(-2)+'/'+ano);	  
}

$( "#data .ui-datepicker-month" ).change(function() {
  setData();   
});

$( "#daa .ui-datepicker-year" ).change(function() {
  setData();   
});

.ui-datepicker-inline .ui-datepicker-calendar{
  display: none;        
}

<p:calendar id="data" value="#{bean.data}" mode="inline" navigator="true" pattern="MM/yyyy"/>   

Upshot: