Question

我想制作一个日历，您可以在其中选择日期，并自动选择时间。我不应该用butons来改变时间:(

所以我有下一个：

<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 - 一旦您选择了日期/时间，但您只想更改时间，则无法执行此操作，因为您无法选择当天，因此您无法看到时间编辑器。< / p>

我正在使用富人脸3.3.3

由于

Answer 1

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>的末尾，或者通过{{1}执行它}或window.onload()）。

如何使用rich：calendar选择在日期上显示timeEditor

1 个答案: