javascript-如何使用rich：calendar在选择日期时显示timeEditor

我想制作一个日历,您可以在其中选择日期,然后自动选择时间.我不应该使用按钮来改变时间:(

所以我有下一个：

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

但这根本不起作用.
有两个问题.

1-选择一天时,将显示弹出窗口.但是,如果在不更改时间的情况下按“接受”,则无法关闭日历：(

2-一旦选择了日期/时间,但只想更改时间,则无法执行此操作,因为您无法选择当前日期,因此看不到时间编辑器.

我正在使用面孔3.3.3

谢谢

解决方法:

仅在实际更改日期或时间时才调用ondateselected和ontimeselected属性,而不是仅单击日期或关闭时间编辑器时才调用.没有标准的< rich：calendar>捕获这些的属性.您需要覆盖标准的calendar.js函数eventCellOnclick()(单击日期时调用)和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()).

标签：richfaces,jsf,javascript
来源： https://codeday.me/bug/20191127/2076186.html