Thành phần lịch Primefaces chỉ hiển thị tháng và năm

Question

thành phần lịch thủ tướng đang nhận ngày theo mặc định. Tôi chỉ có thể nhận được tháng và năm mà không có ngày tháng.

Làm thế nào để có được chỉ tháng, năm

Answer 1

PrimeFaces không có thành phần bộ chọn tháng năm như vậy. Vì vậy, nếu bạn muốn sử dụng thành phần bên ngoài dựa trên jQuery thì hãy kiểm tra jQuery.mtz.monthpicker

Answer 2

Bạn có thể thiết lập này trong mô hình, trong trường hợp của bạn nó sẽ là:

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

Answer 3

tôi đã đọc và bạn không thể đạt được chức năng này ra khỏi hộp từ Primefaces.

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

Câu hỏi này cũ nhưng ý kiến ​​mới nhất từ ​​một tháng trước. Vì vậy, họ sử dụng phương pháp này:

jQuery UI DatePicker to show month year only

Ngoài ra còn có các giải pháp để chỉ sử dụng <p:selectOneMenu> và bild những gì bạn cần ra khỏi nó.

Chúc mừng

Answer 4

Tôi chỉ ẩn bảng chọn trong ngày với CSS. Tôi cũng phải tạo mũi tên riêng để điều hướng vì các mũi tên chuẩn không kích hoạt sự kiện 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; 
} 

phương pháp 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 
} 

Kết quả (PrimeFaces 3.4.2):

Answer 5

Dưới đây là làm thế nào tôi đạt được chọn phạm vi một tháng đơn giản của mà trông như thế này:

Các trang 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> 

Để ngăn hiển thị ngày theo lịch, bạn chỉ cần thiết lập thuộc tính dislay của nó không ai sánh kịp với đoạn mã sau vào tập tin css hoạt động của bạn:

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

Theo ghi nhận của Daniel Slazlay trên, điều hướng với tháng/năm thăng trầm thả hoặc với các biểu tượng mũi tên không thay đổi giá trị ngày nội bộ của các điều khiển p: calendar. Để đạt được điều này, giá trị của các tháng thả xuống được chọn và tháng được đọc cho hai p: lịch khi nút «tạo lại lịch» được kích hoạt.Với thông tin này, bạn có thể tạo chuỗi ngày có định dạng "yyyy-MM-dd" và đặt giá trị ẩn nội bộ của các điều khiển p: calendar Cho tháng bắt đầu của phạm vi tháng, ngày đầu tiên của tháng được trả lại trong khi cho tháng kết thúc, đó là ngày cuối cùng của tháng được trả lại. Này được thực hiện với sự javascript followin:

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

Về phía server, bạn có thể kiểm tra thông tin chính xác nhận được bằng các phương pháp 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)); 
} 

Tôi hy vọng rằng điều này có thể giúp đỡ người khác.

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

Bạn phải thêm khối này để hoàn thành việc chuyển hướng với mũi tên:

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

Answer 8

Bạn có thể sử dụng các sự kiện viewChange trên p: lịch để nắm bắt được nhấp chuột vào vào tháng tới/trước. Sau đó, bạn có thể kích hoạt sự kiện dateSelect bằng cách nhấp vào ngày đầu tiên của tháng.

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> 

Để ẩn cửa sổ với ngày, thêm dòng sau vào css

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

Answer 9

Tận dụng tính năng này từ Documentation Primefaces:

Một sự kiện tiện dụng là viewChange được kích hoạt khi tháng và năm thay đổi. Một phiên bản của org.primefaces.event.DateViewChangeEvent được chuyển đến trình xử lý sự kiện cung cấp thông tin hiện tại.

Made đoạn mã sau: 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); 
    } 

Về cơ bản kích hoạt ajax khi month hoặc year được thay đổi là tính năng chính ở đây. Thật không may, đây là một chút của một công việc xung quanh kể từ khi tôi không thể lấy org.primefaces.event.DateViewChangeEvent. Điều này có vẻ là một lỗi và tôi đã đăng một báo cáo trên Diễn đàn Primefaces ngay bây giờ. Sẽ cập nhật bài đăng này khi tôi nhận được một số phản hồi ở đó.

Hy vọng điều đó sẽ hữu ích.