3

日付を選択すると自動的に時刻を選択できるカレンダーを作りたいです。時間を変更するためにボタンを使用するべきではありません:(

だから私は次のものを持っています：

<rich:calendar id="currentDate" popup="true"
    datePattern="dd/MM/yyyy - HH:mm" enableManualInput="false"
    showFooter="false" required="true" resetTimeOnDateSelect="true"
    oncollapse="return timeSelected;"
    showWeeksBar="false" showWeekDaysBar="true"
    value="#{bean.currentDate}"
    ondateselected="timeSelected=false; Richfaces.getComponent('calendar',this).showTimeEditor(); return true;"
    ontimeselected="timeSelected=true; return true;"
    ontimeselect="timeSelected=true; return true;"
>
    <a4j:support event="onchange" ajaxSingle="true" />
</rich:calendar>

しかし、それはまったく機能しません。2 つの問題があります。

1 - 曜日を選択すると、ポップアップが表示されます。ただし、時間を変更せずに「同意する」を押すと、カレンダーを閉じることができません:(

2 - 日付/時刻を選択した後、時刻のみを変更したい場合は、現在の日付を選択できないため、時刻エディターが表示されないため、変更できません。

リッチフェイス 3.3.3 を使用しています

ありがとう

4

1 に答える 1

3

ondateselectedおよび属性は、日付または時間が実際に変更さontimeselectedれたときにのみ呼び出されます。日付をクリックしたり、時間エディターを閉じたりしたときではありません。それを捉える標準的な属性はありません。標準関数(日付がクリックされたときに呼び出される) と (時間エディターが閉じられたときに呼び出される)をオーバーライドする必要があります。<rich:calendar>calendar.jseventCellOnclick()hideTimeEditor()

以下は、RichFaces 3.3.3 (および Mojarra 1.2_15 と Tomcat 7.0.29) で機能します。

<h:form id="form">
    <rich:calendar id="currentDate" popup="true"
        datePattern="dd/MM/yyyy - HH:mm" enableManualInput="false"
        showFooter="false" required="true" resetTimeOnDateSelect="true"
        showWeeksBar="false" showWeekDaysBar="true"
        value="#{bean.currentDate}"
        oncollapse="return this.component.timeSelected;"
    >
        <a4j:support event="onchange" ajaxSingle="true" />
    </rich:calendar>
</h:form>

<script>
    var currentDateComponent = $('form:currentDate').component;

    var originalCellOnClickFunction = currentDateComponent.eventCellOnClick;
    currentDateComponent.eventCellOnClick = function() {
        this.timeSelected = false;
        originalCellOnClickFunction.apply(this, arguments);
        currentDateComponent.showTimeEditor();
    };

    var originalHideTimeEditorFunction = currentDateComponent.hideTimeEditor;
    currentDateComponent.hideTimeEditor = function() {
        this.timeSelected = true;
        originalHideTimeEditorFunction.apply(this, arguments);
    };
</script>

ondateselected、ontimeselectおよびontimeselected属性が削除され、その属性が変更されていることに注意してくださいoncollapse。また、カレンダーが DOM に入力された後にスクリプトを実行する必要があることにも注意してください。したがって、上記はそのまま機能します。スクリプトを独自の JS ファイルに移動したい場合 (これは良いことです)、DOM 対応のみで実行されるようにしてください (つまり、スクリプトを の最後に置くか、または<body>で実行します)。window.onload()jQuery.ready()

于 2012-09-06T15:51:45.943 に答える