如何在Richfaces中集成时间选择器并将其绑定到jsf托管bean

你能告诉我如何将时间选择器组件集成到我的JSF/Richfaces web应用程序中，并将其值绑定到托管bean吗?

我知道rich:calendar组件提供了日期和时间选择器，但我只需要后者。特别是，我需要为用户提供一个时间选择器，以便他/她可以选择FROM时间和to时间，其中它们都限于从bean读取的特定min/max值。

我可能会使用js/jquery小部件与它们对应的richfaces组件，但我不明白如何正确使用它们并将它们绑定到bean。非常感谢。

rich:calendar是用来选择日期的，它的时间选择器是可选的，我认为你应该自己写，只要放两个rich:inputNumberSpinner为小时和分钟。

<rich:inputNumberSpinner value="#{myBean.hours}" minValue="0" maxValue="23" />
<rich:inputNumberSpinner value="#{myBean.minutes}" minValue="0" maxValue="59" />

在MyBean类中定义两个整数属性，小时和分钟;

这是我的开始和结束时间选择器与客户端验证的代码，希望它有帮助。

timePicker.xhtml :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:a4j="http://richfaces.org/a4j"
    xmlns:rich="http://richfaces.org/rich"
    xmlns:f="http://java.sun.com/jsf/core">
<h:head>
    <title>TimePicker</title>
    <script src="./resources/js/timeValidator.js"></script>
</h:head>
<h:body>
    <rich:panel>
        <h:form id="form1">
            <h:panelGrid border="1" rules="all" columns="2" cellpadding="10">
                <h:panelGrid columns="2">
                    <f:facet name="header">
                        <h:outputText value="Start time" />
                    </f:facet>
                    <h:outputLabel value="HH:" />
                    <rich:inputNumberSpinner id="h1" minValue="0" maxValue="23"
                        onchange="validate('form1:h1','form1:m1','form1:h2','form1:m2',true)" />
                    <h:outputLabel value="MM:" />
                    <rich:inputNumberSpinner id="m1" minValue="0" maxValue="59"
                        onchange="validate('form1:h1','form1:m1','form1:h2','form1:m2',true)">
                    </rich:inputNumberSpinner>
                </h:panelGrid>
                <h:panelGrid columns="2">
                    <f:facet name="header">
                        <h:outputText value="End time" />
                    </f:facet>
                    <h:outputLabel value="HH:" />
                    <rich:inputNumberSpinner id="h2" minValue="0" maxValue="23"
                        onchange="validate('form1:h1','form1:m1','form1:h2','form1:m2',false)" />
                    <h:outputLabel value="MM:" />
                    <rich:inputNumberSpinner id="m2" minValue="0" maxValue="59"
                        onchange="validate('form1:h1','form1:m1','form1:h2','form1:m2',false)" />
                </h:panelGrid>
            </h:panelGrid>
        </h:form>
    </rich:panel>
</h:body>
</html>

/js/timeValidator.js:

function validate(stHourId, stMinId, enHourId, enMinId, stChanged) {
    var stHour = RichFaces.$(stHourId).getValue();
    var stMin = RichFaces.$(stMinId).getValue();
    var enHour = RichFaces.$(enHourId).getValue();
    var enMin = RichFaces.$(enMinId).getValue();
    if (stChanged) {
        if (enHour < stHour) {
            enHour = stHour;
        } else if (enHour == stHour && enMin < stMin) {
            enMin = stMin;
        }
    } else {
        if (enHour < stHour) {
            stHour = enHour;
        } else if (enHour == stHour && enMin < stMin) {
            stMin = enMin;
        }
    }
    RichFaces.$(stHourId).setValue(stHour);
    RichFaces.$(stMinId).setValue(stMin);
    RichFaces.$(enHourId).setValue(enHour);
    RichFaces.$(enMinId).setValue(enMin);
}

相关内容

最新更新

热门标签：