16

primefacesカレンダーコンポーネントはデフォルトで日付を取得しています。日付なしで月と年だけを取得できますか？

月と年だけを取得する方法

4

12 に答える 12

9

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カレンダーが月と年のみを表示するように変更されました

于 2013-04-24T14:07:38.580 に答える
6

PrimeFacesには、月年ピッカーコンポーネント自体はありません。したがって、jQueryベースの外部コンポーネントを使用する場合は、jQuery.mtz.monthpickerをチェックアウトしてください。

于 2013-03-25T12:46:17.433 に答える
4

これが私がこのように見える単純な月の範囲セレクターをどのように達成したかです：

月の範囲

VoirCalendrier.xhtml Webページ：

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

上記のDanielSlazlayが指摘したように、月/年のドロップダウンまたは矢印アイコンを使用してナビゲートしても、p：calendarコントロールの内部日付値は変更されません。これを実現するために、[カレンダーの再生成]ボタンを押すと、選択した月と年のドロップダウンの値が2つのp：calendarに対して読み取られます。この情報を使用して、「yyyy-MM-dd」の形式で日付文字列を作成し、p：calendarコントロールの内部非表示値を設定できます。月の範囲の開始月、月の最初の日が返されるのは、月末の場合、返されるのはその月の最終日です。これは、次の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));
}

これが他の人の役に立つことを願っています。

于 2014-11-05T04:40:22.837 に答える
2

Primefacesの最後のリリース（バージョン7.0）には、必要なものが追加されました<p:datePicker />。とほぼ同じように機能し<p:calendar>ますが、月と年のみを表示するように簡単に構成できます。

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

たとえば、月が選択されると、その値は「Date」オブジェクトに格納されます。このオブジェクトの値は次のようになります。
（2019年4月が選択されている場合）Mon Apr 01 00:00:00 BRT 2019
この場合、次のようになります。日、時、分などの値を無視し、選択した月と年を使用する必要があります。
詳細については、ドキュメントを読み、ショーケースを参照してください

于 2019-07-03T02:32:32.677 に答える
1 
 //<![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" />
于 2015-12-01T14:07:08.783 に答える
0

これはパターンで設定できます。あなたの場合は次のようになります。

<p:calendar id="test" value="#{bean.date}" pattern="MM.yyyy" />
于 2013-03-25T07:43:29.173 に答える
0

私が読んでいたのですが、Primefacesの箱から出してこの機能を実現することはできません。

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

質問は古いですが、1か月前の最新のコメントです。したがって、彼らはこのアプローチを使用します。

月年のみを表示するjQueryUIDatePicker

<p:selectOneMenu>必要なものだけを使用してビルドするソリューションもあります。

乾杯

于 2013-03-25T08:06:42.043 に答える
0

矢印の付いたナビゲーションを完了するには、このブロックを追加する必要があります。

$(".ui-datepicker-next").click( function(){changeMonthYear(calendar);});
$(".ui-datepicker-prev").click( function(){changeMonthYear(calendar);});
于 2017-01-19T16:31:29.787 に答える
0

p：calendarの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;}
于 2017-03-23T13:46:19.553 に答える
0

Primefacesドキュメントのこの機能を利用しました。

もう1つの便利なイベントは、月と年が変更されたときに発生する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フォーラムにレポートを投稿しました。フィードバックがありましたら、この投稿を更新します。

それが役に立てば幸い。

于 2017-06-14T08:29:50.910 に答える
0

これで、primengカレンダーに月ピッカーオプションが追加され、pカレンダーでは月を表示オプションとして使用します。

<p-calendar [(ngModel)]="dateValue" view="month" dateFormat="mm/yy" [yearNavigator]="true" yearRange="2000:2030"></p-calendar>
于 2019-02-14T17:54:05.993 に答える
0

あなたはこのようにすることができます：

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

}

それは私に働いた！

于 2019-05-08T14:16:44.007 に答える