El componente de calendario Primefaces muestra solo el mes y el año

Solución:

Acabo de ocultar el selector de tabla del día con CSS. También tuve que crear mis propias flechas para navegar, porque las flechas estándar no disparan dateSelect evento.

Margen:

<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;
}

Métodos de frijoles:

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
}  

Resultado (PrimeFaces 3.4.2):

PrimeFaces no tiene el componente selector de mes y año como tal. Entonces, si desea utilizar un componente externo basado en jQuery, consulte jQuery.mtz.monthpicker

Así es como logré un selector de rango de un mes simple que se ve así:

La página web VoirCalendrier.xhtml:

<h:form id="calendrierRegenererFormulaire">
   <h2><h:outputText value="#{msgs.CalendrierPlageAafficher}   "/></h2>
   <h:panelGrid columns="6">
      <h:outputLabel value="#{msgs.CalendrierDateDebut} : " for="calendrierDateDebut" />
      <p:calendar  id="calendrierDateDebut" value="#{locationsControleur.dateDebut}"
                pattern="yyyy-MM-dd" effect="slideDown" navigator="true" mode="inline" 
                lang="#{sessionControleur.localeInterface}" locale="#{sessionControleur.langue}" style="moisAnSeul" />
      <h:outputLabel value="#{msgs.CalendrierDateFin} : " for="calendrierDateFin" />
      <p:calendar  id="calendrierDateFin" value="#{locationsControleur.dateFin}"    
                pattern="yyyy-MM-dd" effect="slideDown" navigator="true" mode="inline"
                lang="#{sessionControleur.localeInterface}" locale="#{sessionControleur.langue}" style="moisAnSeul" />
      &nbsp;
      <p:commandButton value="#{msgs.CalendrierRegenerer}" update=":calendrierFormulaire" 
                 onclick="regenererCal()"/>
   </h:panelGrid>
</h:form>

Para evitar que se muestren los días del calendario, solo tiene que establecer su propiedad dislay en none con el siguiente código en su archivo css activo:

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

Como señaló Daniel Slazlay anteriormente, navegar con los menús desplegables de mes / año o con los íconos de flecha no cambia el valor de fecha interno de los controles p: calendar. Para lograr esto, se leen los valores de los menús desplegables del mes y año seleccionados para los dos p: calendarios cuando se activa el botón «regenerar calendario». Con esta información, puede construir una cadena de fecha con el formato “aaaa-MM-dd” y establecer el valor oculto interno de los controles p: calendar Para el mes inicial del rango de meses, el primer día del mes se devuelve mientras que para el mes final, es el último día del mes que se devuelve. Esto se hace con el siguiente javascript:

function regenererCal() {
    year = $("#calendrierRegenererFormulaire\:calendrierDateDebut .ui-datepicker-year").val();
    month = $("#calendrierRegenererFormulaire\:calendrierDateDebut .ui-datepicker-month").val();
    $('#calendrierRegenererFormulaire\:calendrierDateDebut_input').val(year + '-' + ('0' + (++month)).slice(-2) + '-01');

    year = $("#calendrierRegenererFormulaire\:calendrierDateFin .ui-datepicker-year").val();
    month = $("#calendrierRegenererFormulaire\:calendrierDateFin .ui-datepicker-month").val();
    lastDay = new Date(year, month + 1, 0); // To get last day of month, see http://stackoverflow.com/a/13572682/1431979
    $('#calendrierRegenererFormulaire\:calendrierDateFin_input').val(lastDay.getFullYear() + '-' + ('0' + (lastDay.getMonth()+1)).slice(-2) + '-' + lastDay.getDate());

    // Check what is posted to your server
    console.log("[voirCalendrier.js]regenererCal calendrierDateDebut_input = " +     $('#calendrierRegenererFormulaire\:calendrierDateDebut_input').val());
    console.log("[voirCalendrier.js]regenererCal calendrierDateFin_input = " +     $('#calendrierRegenererFormulaire\:calendrierDateFin_input').val());
}

En el lado del servidor, puede comprobar que los métodos de establecimiento reciben la información correcta:

...
formatAAAA_MM_JJ = new SimpleDateFormat("yyyy-MM-dd HH:mm", langue);
...

public void setDateDebut(Date dateDebut) {
    this.dateDebut = dateDebut;
    logger.info("{locationsContrôleur}setDateDebut dateDebut = " + formatAAAA_MM_JJ.format(dateDebut));
}

public void setDateFin(Date dateFin) {
    this.dateFin = dateFin;
    logger.info("{locationsContrôleur}setDateFin    dateFin = " + formatAAAA_MM_JJ.format(dateFin));
}

Espero que esto pueda ayudar a otros.

---

---

Utiliza Nuestro Buscador