This use case demonstrates two time pickers to select chronological time range.
The first timepicker is restricted to before the time selected in the second timepicker, and vice versa.
Source
<h:panelGrid columns="5">
<h:outputText value="Start time"/>
<pe:timePicker value="#{timePickerController.time1}" mode="popup" onHourShow="tpStartOnHourShowCallback"
onMinuteShow="tpStartOnMinuteShowCallback" widgetVar="startTimeWidget"/>
<h:panelGroup layout="block" style="width:20px;"/>
<h:outputText value="End time"/>
<pe:timePicker value="#{timePickerController.time2}" mode="popup" onHourShow="tpEndOnHourShowCallback"
onMinuteShow="tpEndOnMinuteShowCallback" widgetVar="endTimeWidget"/>
</h:panelGrid>
@Named
@ViewScoped
public class TimePickerController implements Serializable {
private static final long serialVersionUID = 20120224L;
private Date time1;
private Date time2;
private LocalTime time3;
private LocalTime time4;
private LocalTime time5;
private Date time6;
private boolean showTime = false;
private String locale = "en_US";
public TimePickerController() {
final Calendar calendar = Calendar.getInstance();
calendar.set(Calendar.AM_PM, Calendar.AM);
calendar.set(Calendar.HOUR, 8);
calendar.set(Calendar.MINUTE, 15);
time1 = calendar.getTime();
calendar.set(Calendar.HOUR, 11);
calendar.set(Calendar.MINUTE, 40);
time2 = calendar.getTime();
time3 = LocalTime.now();
time5 = LocalTime.now();
time6 = new Date();
}
public Date getTime1() {
return time1;
}
public void setTime1(final Date time1) {
this.time1 = time1;
}
public Date getTime2() {
return time2;
}
public void setTime2(final Date time2) {
this.time2 = time2;
}
public LocalTime getTime3() {
return time3;
}
public void setTime3(final LocalTime time3) {
this.time3 = time3;
}
public LocalTime getTime4() {
return time4;
}
public void setTime4(final LocalTime time4) {
this.time4 = time4;
}
public LocalTime getTime5() {
return time5;
}
public void setTime5(final LocalTime time5) {
this.time5 = time5;
}
public Date getTime6() {
return time6;
}
public void setTime6(final Date time6) {
this.time6 = time6;
}
public String getLocale() {
return locale;
}
public void setLocale(final String locale) {
this.locale = locale;
}
public String getFormattedTime1() {
return getFormattedTime(time1, "HH:mm");
}
public String getFormattedTime2() {
return getFormattedTime(time2, "HH:mm");
}
public String getFormattedTime3() {
return getFormattedTime(time3, "HH:mm");
}
public String getFormattedTime4() {
return getFormattedTime(time4, "hh-mm a");
}
public String getFormattedTime5() {
return getFormattedTime(time5, "HH:mm");
}
public String getFormattedTime6() {
return getFormattedTime(time6, "HH:mm");
}
public void showTime(final ActionEvent ae) {
showTime = true;
}
public void changeLocale(final ActionEvent ae) {
if (StringUtils.equalsIgnoreCase(locale, "pt_BR")) {
locale = "en_US";
}
else {
locale = "pt_BR";
}
}
public boolean isShowTimeDialog() {
if (showTime) {
showTime = false;
return true;
}
return false;
}
public void timeSelectListener(final TimeSelectEvent<Date> timeSelectEvent) {
final FacesMessage msg = new FacesMessage(FacesMessage.SEVERITY_INFO, "Time select fired",
"Selected time: " + getFormattedTime(timeSelectEvent.getTime(), "HH:mm"));
FacesContext.getCurrentInstance().addMessage(null, msg);
}
public void beforeShowListener(final BeforeShowEvent beforeShowEvent) {
final FacesMessage msg = new FacesMessage(FacesMessage.SEVERITY_INFO, "Before show fired",
"Component id: " + beforeShowEvent.getComponent().getId());
FacesContext.getCurrentInstance().addMessage(null, msg);
}
public void closeListener(final CloseEvent closeEvent) {
final FacesMessage msg = new FacesMessage(FacesMessage.SEVERITY_INFO, "Close fired",
"Component id: " + closeEvent.getComponent().getId());
FacesContext.getCurrentInstance().addMessage(null, msg);
}
private String getFormattedTime(final Date time, final String format) {
if (time == null) {
return null;
}
final SimpleDateFormat formatter = new SimpleDateFormat(format);
return formatter.format(time);
}
private String getFormattedTime(final Temporal time, final String format) {
if (time == null) {
return null;
}
final DateTimeFormatter formatter = DateTimeFormatter.ofPattern(format);
return formatter.format(time);
}
}
<h:outputScript id="timeRangeScript" target="body">
/* <![CDATA[ */
// Use case 2
function onHourShowCallback(hour) {
if ((hour > 20) || (hour < 6)) {
return false; // not valid
}
return true; // valid
}
function onMinuteShowCallback(hour, minute) {
if ((hour == 20) && (minute >= 30)) {
return false; // not valid
}
if ((hour == 6) && (minute < 30)) {
return false; // not valid
}
return true; // valid
}
// Use case 3
function tpStartOnHourShowCallback(hour) {
if (!PrimeFaces.widgets['endTimeWidget']) {
return false;
}
var tpEndHour = parseInt(PF('endTimeWidget').getHours());
// Check if proposed hour is prior or equal to selected end time hour
if (parseInt(hour) <= tpEndHour) {
return true;
}
// if hour did not match, it can not be selected
return false;
}
function tpStartOnMinuteShowCallback(hour, minute) {
if (!PrimeFaces.widgets['endTimeWidget']) {
return false;
}
var tpEndHour = parseInt(PF('endTimeWidget').getHours());
var tpEndMinute = parseInt(PF('endTimeWidget').getMinutes());
// Check if proposed hour is prior to selected end time hour
if (parseInt(hour) < tpEndHour) {
return true;
}
// Check if proposed hour is equal to selected end time hour and minutes is prior
if ((parseInt(hour) == tpEndHour) && (parseInt(minute) < tpEndMinute)) {
return true;
}
// if minute did not match, it can not be selected
return false;
}
function tpEndOnHourShowCallback(hour) {
if (!PrimeFaces.widgets['startTimeWidget']) {
return false;
}
var tpStartHour = parseInt(PF('startTimeWidget').getHours());
// Check if proposed hour is after or equal to selected start time hour
if (parseInt(hour) >= tpStartHour) {
return true;
}
// if hour did not match, it can not be selected
return false;
}
function tpEndOnMinuteShowCallback(hour, minute) {
if (!PrimeFaces.widgets['startTimeWidget']) {
return false;
}
var tpStartHour = parseInt(PF('startTimeWidget').getHours());
var tpStartMinute = parseInt(PF('startTimeWidget').getMinutes());
// Check if proposed hour is after selected start time hour
if (parseInt(hour) > tpStartHour) {
return true;
}
// Check if proposed hour is equal to selected start time hour and minutes is after
if ((parseInt(hour) == tpStartHour) && (parseInt(minute) > tpStartMinute)) {
return true;
}
// if minute did not match, it can not be selected
return false;
}
/* ]]> */
</h:outputScript>