Question

primefaces日历组件默认为获取日期。我可以只获得没有约会的月份和年份。

如何只获得月份和年份

Answer 1

我只是用CSS隐藏了日期选择器的表格。我还必须创建自己的导航箭头，因为标准箭头不会触发dateSelect事件。

<强>标记：

<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方法：

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
}

结果（PrimeFaces 3.4.2）：

PrimeFaces calendar modified to show only month and year

Answer 2

PrimeFaces没有月份选择器组件。因此，如果您想使用基于jQuery的外部组件，请结帐jQuery.mtz.monthpicker

Answer 3

以下是我如何实现一个简单的月份范围选择器，如下所示：

month range

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>

要阻止显示日历日，您只需使用活动css文件中的以下代码将其dislay属性设置为none：

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

如上面的Daniel Slazlay所述，使用月/年下拉菜单或使用箭头图标进行导航不会更改p：calendar控件的内部日期值。为实现此目的，当触发“重新生成日历”按钮时，将读取两个p：日历中所选月份和年份下拉的值。使用此信息，您可以构建格式为“yyyy-MM-dd”的日期字符串并设置p：日历控件的内部隐藏值对于月份范围的起始月份，该月的第一天在结束月份返回，它是返回的月份的最后一天。这是通过以下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());
}

在服务器端，您可以检查setter方法是否收到了正确的信息：

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

我希望这可以帮助别人。

Answer 4

 //<![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 5

你可以在模式中设置它，在你的情况下它将是：

<p:calendar id="test" value="#{bean.date}" pattern="MM.yyyy" />

Answer 6

我正在阅读，你无法从Primefaces的方框中获得这个功能。

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

问题是陈旧但一个月前的最新评论。所以他们使用这种方法：

jQuery UI DatePicker to show month year only

还有一个解决方案只能使用<p:selectOneMenu>并将你需要的内容包含在内。

干杯

Answer 7

您必须添加此块才能使用箭头完成导航：

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

Answer 8

您可以使用p：日历上的viewChange事件来捕获下一个/上个月的点击。然后，您可以通过单击该月的第一天触发dateSelect事件。

<强> JSF ：

<p:calendar value="#{sampleBean.month}" styleClass="monthcal" mode="inline">
    <p:ajax event="viewChange" onsuccess="$('.ui-calendar[id=\''+this.source+'\'] a.ui-state-default').filter(function(){return $(this).text()*1===1;}).click();" />
</p:calendar>

要使用天数隐藏窗格，请将以下内容添加到css

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

Answer 9

使用Primefaces文档中的此功能：

另一个方便的事件是在月份和月份时触发的viewChange 一年的变化。 org.primefaces.event.DateViewChangeEvent的一个实例传递给提供当前月份和年份的事件监听器信息。

制作以下代码：的 XHTML

<p:panelGrid styleClass="monthYearOnly"> <p:row> <p:column>FROM:</p:column> <p:column> <p:calendar id="from" mode="inline" value="#{callEntryBean.from}" navigator="true"> <p:ajax event="viewChange" listener="#{callEntryBean.updateFrom()}"/> </p:calendar> </p:column> <p:column>TO:</p:column> <p:column> <p:calendar id="to" mode="inline" value="#{callEntryBean.to}" navigator="true"> <p:ajax event="viewChange" listener="#{callEntryBean.updateTo()}"/> </p:calendar> </p:column> <p:column> <p:commandButton value="Filter" action="#{callEntryBean.filterDisplay}" update=""/> </p:column> </p:row> </p:panelGrid>

<强> CSS

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

<强>豆

public void updateFrom(){ Map<String,String> requestParams = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap(); LOGGER.info("before: " + from); Calendar c = Calendar.getInstance(); c.setTime(from); c.set(Calendar.MONTH, Integer.parseInt(requestParams.get("form:from_month")) - 1); c.set(Calendar.YEAR, Integer.parseInt(requestParams.get("form:from_year"))); from = c.getTime(); LOGGER.info("after: " + from); } public void updateTo(){ Map<String,String> requestParams = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap(); LOGGER.info("before: " + to); Calendar c = Calendar.getInstance(); c.setTime(to); c.set(Calendar.MONTH, Integer.parseInt(requestParams.get("form:to_month")) - 1); c.set(Calendar.YEAR, Integer.parseInt(requestParams.get("form:to_year"))); c.set(Calendar.DATE,c.getActualMaximum(Calendar.DAY_OF_MONTH)); to = c.getTime(); Calendar now = Calendar.getInstance(); if(c.after(now)){ to = now.getTime(); } LOGGER.info("after: " + to); }

基本上，month或year更改时的ajax触发器是此处的主要功能。不幸的是，这是一个解决方法，因为我无法检索org.primefaces.event.DateViewChangeEvent。这似乎是一个错误，我刚刚在Primefaces论坛上发布了一份报告。当我在那里得到一些反馈时会更新这篇文章。

希望它有所帮助。

Answer 10

现在Primeng日历具有月选择器选项，在p日历中使用月作为查看选项。

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

Answer 11

您可以通过以下方式进行：

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

豆豆

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

}

对我有用！

Answer 12

Primefaces的最新版本（7.0版）刚刚添加了您需要的内容：<p:datePicker />。它几乎可以像<p:calendar>一样工作，但是可以很容易地配置为仅显示月份和年份：

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

例如，当选择一个月时，其值存储在“日期”对象中，该对象将具有值：
（如果选择了2019年4月）周一4月1日00:00:00 BRT 2019
在这种情况下，您只需要忽略日期，小时，分钟等值，而使用选择的月份和年份即可。
有关更多信息，请阅读Documentation并查看Showcase

Primefaces日历组件仅显示月份和年份

12 个答案: