如何在使用丰富的日期选择时显示时间编辑器：日历答案

【问题标题】：How to show timeEditor on date select using rich:calendar如何在使用丰富的日期选择时显示时间编辑器：日历
【发布时间】：2012-08-28 06:19:52
【问题描述】：

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

所以我有下一个：

<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

谢谢

【问题讨论】：

标签： javascript jsf richfaces

【解决方案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> 的末尾，或者通过window.onload() 或@987654334 执行它@)。

【讨论】：