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>

但它根本不起作用。有两个问题。

1 - 当您选择一天时，会出现弹出窗口。但是，如果您在不更改时间的情况下按“接受”，则无法关闭日历:(

2 - 一旦你选择了日期/时间，但你只想更改时间，你就不能这样做，因为你不能选择当前日期，所以你看不到时间编辑器。

我正在使用丰富的面孔 3.3.3

谢谢

4

1 回答 1

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 就绪上执行（即，将脚本放在 end of<body>或通过window.onload()or执行jQuery.ready()）。

于 2012-09-06T15:51:45.943 回答