Основная составляющая компонента календаря показывается только месяц и год

Question

. Могу ли я получить только месяц и год без дат.

Как получить только месяц и год

Answer 1

PrimeFaces не месяц год сборщика компонент как таковой. Поэтому, если вы хотите использовать внешний компонент на основе jQuery, тогда выйдите jQuery.mtz.monthpicker

Answer 2

Вы можете установить это в шаблоне, в вашем случае это будет:

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

Answer 3

Я читал, и вы не можете достичь этой функциональности из окна от Primefaces.

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

Вопрос старый, но последние комментарии от одного месяца назад. Таким образом, они используют этот подход:

jQuery UI DatePicker to show month year only

Существует также решение использовать только <p:selectOneMenu> и Бильд, что вам нужно из него.

Приветствия

Answer 4

Я только что спрятал таблицу выбора дня с помощью CSS. Мне также пришлось создавать собственные стрелки для навигации, потому что стандартные стрелки не запускают событие dateSelect.

Markup:

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

Answer 5

Вот как я достиг выбора диапазона с помощью простого месяца, который выглядит следующим образом:

Веб-страница 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> 

Чтобы предотвратить отображение календарных дней, вам просто нужно установить его Dislay свойство ни со следующим кодом в активном файле CSS:

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

Как отметил Даниэль Slazlay выше, навигация с месяц/год падения капель или со значками стрелок не изменить внутреннее значение даты элементов управления p: calendar. Для этого значение выбранных выпадающих значений месяца и года читается для двух p: calendar при нажатии кнопки «Восстановить календарь».С помощью этой информации вы можете построить строку даты с форматом «yyyy-MM-dd» и установить внутреннее скрытое значение элементов управления p: calendar. Для начального месяца диапазона месяца, первого дня месяца возвращается в течение конечного месяца, это последний день месяца, который возвращается. Это делается с 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()); 
} 

На стороне сервера, вы можете проверить, что нужная информация получена с помощью методов инкубационных:

... 
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 6

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

Вы должны добавить этот блок, чтобы завершить навигацию со стрелкой:

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

Answer 8

Вы можете использовать событие 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; 
} 

Bean

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 здесь основная функция. К сожалению, это немного работает, так как я не могу получить org.primefaces.event.DateViewChangeEvent. Кажется, это ошибка, и я опубликовал отчет на форуме «Праймлайнс» только сейчас. Будет обновлен этот пост, когда я получу какую-то обратную связь.

Надеюсь, это поможет.