Primefaces calendar component show only month and year

Question

primefaces calendar component is getting Date by default. Can I get only month and year without dates.

How to get only month and year

Answer 1

Here is how I achieved a simple month's range selector which look like this :

The VoirCalendrier.xhtml web page :

To prevent the display of the calendar days, you just have to set its dislay property to none with the following code in your active css file :

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

As noted by Daniel Slazlay above, navigating with the month/year drop downs or with the arrow icons do not change the internal date value of the p:calendar controls. To achieve this, the value of the selected month and year drop downs are read for the two p:calendar when the «regenerate calendar» button is fired. With this information, you are able to construct a date string with the format "yyyy-MM-dd" and to set the internal hidden value of the p:calendar controls For the starting month of the month range, the first day of the month is returned while for the ending month, it is the last day of the month which is returned. This is done with the followin 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());
}

On the server side, you can check that the right information is received by the setter methods :

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

I hope that this can help others.