如何在日期中显示timeEditor使用rich：日历

我想制作一个日历，您可以选择日期，并自动选择时间。我不应该使用butons更改时间:(如何在日期中显示timeEditor使用rich：日历

所以我有下：

<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

感谢

来源

2012-09-03 OscarSan

的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()执行）。

来源

2012-09-06 15:51:45 BalusC

太棒了！这也适用于我。谢谢 – OscarSan

不客气。 – BalusC

如何在日期中显示timeEditor使用rich：日历

回答

相关问题