1

您能否解释一下如何将时间选择器组件集成到我的JSF/Richfaces Web 应用程序中，并将其值绑定到托管 bean？

我知道rich:calendar组件带有日期和时间选择器，但我只需要后者。特别是我需要为用户提供一个时间选择器，以便他/她可以选择一个 FROM 时间和一个 TO 时间，它们都被限制为从 bean 读取的特定最小/最大值。

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

4

2 回答 2

2

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

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

在 MyBean 类中定义两个整数属性，小时和分钟；然后为它们添加 getter 和 setter。

于 2011-07-15T15:01:42.827 回答
2

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

时间选择器.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);
}
于 2011-07-21T09:51:16.570 回答