How to integrate a time picker in Richfaces and bind it to a jsf managed bean
Could you please explain me how to integrate a time picker component into my JSF/Richfaces web app, and bind its value to a managed bean?
I know the rich:calendar component comes out with both a date and a time pickers, but I need the latter only. In particular I need to provide a time selector to the user, so that he/she c开发者_如何学JAVAan select a FROM time and a TO time, where they are both limited to specific min/max values read from the bean.
I can probably use js/jquery widgets with they're corresponding richfaces components, but I didn't understand how to properly use them and bind them to the bean. Thank you very much.
rich:calendar is for choosing date and its time picker is optional, I think you should write it yourself, just put two rich:inputNumberSpinner for hours and minutes.
<rich:inputNumberSpinner value="#{myBean.hours}" minValue="0" maxValue="23" />
<rich:inputNumberSpinner value="#{myBean.minutes}" minValue="0" maxValue="59" />
In MyBean class define two integer properties, hours and minutes; then add getters and setters for them.
Here is my code for start and end time pickers with client side validation, hope it helps.
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>
and resources/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);
}
加载中,请稍侯......
精彩评论