web-dev-qa-db-fra.com

Le composant de calendrier Primefaces n'affiche que le mois et l'année

le composant de calendrier primefaces reçoit Date par défaut. Puis-je obtenir seulement le mois et l'année sans dates.

Comment obtenir seulement le mois et l'année

primefaces
15
Sagar

PrimeFaces n'a pas de composant sélecteur mois année en tant que tel. Donc, si vous voulez utiliser un composant externe basé sur jQuery, allez à la caisse jQuery.mtz.monthpicker

6
Jitesh

Je viens de cacher la table du sélecteur de jour avec CSS. J'ai également dû créer mes propres flèches pour la navigation, car les flèches standard ne déclenchent pas l'événement dateSelect.

Balisage:

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

Méthodes de haricots:

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
}

Résultat ( PrimeFaces 3.4.2 ):

PrimeFaces calendar modified to show only month and year

9
Daniel Szalay

Voici comment j'ai réalisé un simple sélecteur de plage d'un mois qui ressemble à ceci:

month range

La page 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>

Pour empêcher l'affichage des jours du calendrier, il vous suffit de définir sa propriété dislay sur none avec le code suivant dans votre fichier css actif:

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

Comme indiqué par Daniel Slazlay ci-dessus, la navigation dans les menus déroulants mois/année ou avec les flèches ne modifie pas la valeur de date interne des commandes p: calendar. Pour ce faire, les valeurs des menus déroulants mois et année sélectionnés sont lues pour les deux calendriers p: lorsque le bouton «Régénérer le calendrier» est activé. Avec ces informations, vous pouvez construire une chaîne de date au format "aaaa-MM-jj" et définir la valeur cachée interne des commandes p: calendar. est retourné alors que pour le dernier mois, c'est le dernier jour du mois qui est retourné. Ceci est fait avec le javascript suivant: 

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

Du côté du serveur, vous pouvez vérifier que les bonnes méthodes sont reçues par les méthodes 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));
}

J'espère que cela peut aider les autres.

4
Pierre C
 //<![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" />
1
Edinho Freitas

Utilisé cette fonctionnalité de la documentation Primefaces:

Un autre événement pratique est le viewChange qui est déclenché lorsque month et changements d'année. Une instance de org.primefaces.event.DateViewChangeEvent est passé à l'écouteur d'événement fournissant le mois et l'année en cours information.

Fait le code suivant: 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;
}

Haricot 

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

Fondamentalement, le déclencheur ajax lorsque month ou year est modifié est la principale caractéristique ici. Malheureusement, il s’agit là d’un peu de travail, car je ne peux pas récupérer le org.primefaces.event.DateViewChangeEvent. Cela semble être un bug et j'ai posté un rapport sur le forum Primefaces tout à l'heure. Mettra à jour ce post lorsque j'aurai des commentaires là-bas.

J'espère que ça aide.

0
Fritz

Vous pouvez définir cela dans le motif, dans votre cas, ce serait:

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

Je lisais et vous ne pouvez pas obtenir cette fonctionnalité de la boîte de Primefaces.

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

La question est ancienne mais les derniers commentaires d'il y a un mois. Alors ils utilisent cette approche:

jQuery UI DatePicker pour afficher le mois, uniquement

Il existe également la solution consistant à utiliser uniquement <p:selectOneMenu> et à éditer ce dont vous avez besoin.

À votre santé

0
Andres L

Vous pouvez utiliser l'événement viewChange sur le calendrier p: pour capturer le clic sur le mois suivant/précédent. Vous pouvez ensuite déclencher l'événement dateSelect en cliquant sur le premier jour du mois. 

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>

Pour masquer le volet avec les jours, ajoutez ce qui suit au fichier css

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

Maintenant, le calendrier primeur a une option de sélection de mois, dans le calendrier p en utilisant l'option mois comme vue.

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

Vous devez ajouter ce bloc pour compléter la navigation avec la flèche:

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