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

Now the primeng calendar have a month picker option, in the p-calendar using month as view option.

<p-calendar [(ngModel)]="dateValue" view="month" dateFormat="mm/yy" [yearNavigator]="true" yearRange="2000:2030"></p-calendar>

Answer 2

You could do in this way:

XHTML

                 <p:column>
                    <p:calendar id="data" locale="pt_BR" navigator="true" showOn="button"
                                pattern="yyyy-MM-dd" mode="inline" view="month"
                                maxdate="#{cadastroResumoPorUnidadeBean.dataAtual}"
                                styleClass="escolha-data"
                                value="#{cadastroResumoPorUnidadeBean.dataInicio}">
                        <p:ajax event="viewChange" process="@this"
                                listener="#{cadastroResumoPorUnidadeBean.onChangeDataInicio}"
                                update="calendario"/>
                    </p:calendar>
                </p:column>

CSS

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

BEAN

public void onChangeDataInicio(DateViewChangeEvent event) throws ParseException {
    dataInicio = new Date();
    SimpleDateFormat dateformat = new SimpleDateFormat("dd-M-yyyy");
    String inicio = "01-"+event.getMonth() +"-" + event.getYear();
    this.dataInicio = dateformat.parse(inicio);

}

It worked to me!

Answer 3

 //<![CDATA[

    function showMonthYear(calendar){

        $('.ui-datepicker-calendar').css('display','none');
        $('.ui-datepicker').css('top', $('.ui-datepicker').offset().top+250);

        var month = '';
        var year = '';

        if($(calendar).val()){
            month = $(calendar).val().split('/')[0];
            year = $(calendar).val().split('/')[1];
        } else {
            month = $.datepicker.formatDate("mm", new Date());
            year = $.datepicker.formatDate("yy", new Date());
        }

        var exists = 0 != $('.ui-datepicker-year option[value='+year+']').length;
        if(!exists){

            $(".ui-datepicker-year").empty();
            var initYear = parseInt(year)-10;
            var endYear = parseInt(year)+10;
            while(initYear < endYear){

                $(".ui-datepicker-year").append($('<option>', {value:initYear, text: initYear}));
                initYear++;
            }

        }

        $('.ui-datepicker-month').val(parseInt(month)-1);
        $('.ui-datepicker-year').val(year);
        $(".ui-datepicker-month").change( function(){changeMonthYear(calendar);});
        $(".ui-datepicker-year").change( function(){changeMonthYear(calendar);});

    }

    function changeMonthYear(calendar){

        console.log('changeMonthYear');
        $('.ui-datepicker-calendar').css('display','none');
        $(".ui-datepicker-month").change( function(){changeMonthYear(calendar);});
        $(".ui-datepicker-year").change( function(){changeMonthYear(calendar);});

        var month = parseInt($('.ui-datepicker-month').val())+1; 
        if(month < 10){ month = '0'+month; } 
        $(calendar).val(month+"/"+parseInt($('.ui-datepicker-year').val()));

    }


//      ]]>
</script>

<p:calendar size="5"
    onclick="showMonthYear(this)" 
    maxlength="10" pattern="MM/yyyy" navigator="true" />

Answer 4

The last release of Primefaces (Version 7.0) has just added what you need: the <p:datePicker />. It works almost exactly as a <p:calendar> but it can be easily configured to show only months and years:

<p:datePicker value="#{managedBean.date}" view="month" 
        pattern="MM/yyyy" yearNavigator="true" yearRange="1986:2025" />

For example, when a month is selected, its value is stored in a "Date" object, which will have the value:
(If April of 2019 is selected) Mon Apr 01 00:00:00 BRT 2019
In this case, you would just have to ignore the day, hour, minute, etc values and use the month and year selected.
For more information, read the Documentation and see the Showcase

Answer 5

I was reading and you cant achieve this functionality out from the box from Primefaces.

https://code.google.com/p/primefaces/issues/detail?id=3453

The question is old but the latest comments from one month ago. So they use this approach:

jQuery UI DatePicker to show month year only

There is also the solution to only use <p:selectOneMenu> and bild what you need out of it.

Cheers

Answer 6

You have to add this block to complete the navigation with arrow:

$(".ui-datepicker-next").click( function(){changeMonthYear(calendar);});
$(".ui-datepicker-prev").click( function(){changeMonthYear(calendar);});