ClockPicker is a clock-style timepicker.
<h:form>
<div class="card">
<p:growl showDetail="true" showSummary="true">
<p:autoUpdate/>
</p:growl>
<div>
<h5>AM/PM with Auto-Close</h5>
<div class="flex">
<pe:clockpicker id="autoclose" widgetVar="autocloseWidget" autoClose="true"
value="#{clockPickerView.time}"
twelveHour="true" locale="es"/>
<p:commandButton id="submitButton" value="Submit"
actionListener="#{clockPickerView.showTime1}" update="@form"
styleClass="ml-2" icon="pi pi-save"/>
</div>
<h5>24 Hour with Manual Close Mode</h5>
<pe:clockpicker id="closeable" widgetVar="closeableWidget" autoClose="false"
value="#{clockPickerView.time2}" showOn="button">
<p:ajax listener="#{clockPickerView.showTime2}"/>
</pe:clockpicker>
<h5>Open In Dialog</h5>
<p:commandButton value="Open Dialog" type="button" icon="pi pi-external-link"
onclick="PF('dlg1').show()"/>
<p:dialog header="ClockPicker" widgetVar="dlg1" height="350" width="350" showEffect="fade"
closeOnEscape="true">
<pe:clockpicker id="dlgClockPicker" widgetVar="dialogClockPickerWidget" autoClose="false"
value="#{clockPickerView.time3}" showOn="button">
<p:ajax listener="#{clockPickerView.showTime3}"/>
</pe:clockpicker>
</p:dialog>
<p></p>
<p:commandButton type="button" value="Disable clock pickers" styleClass="mt-2 mr-2"
onclick="PF('autocloseWidget').disable();PF('closeableWidget').disable();"/>
<p:commandButton type="button" value="Enable clock pickers" styleClass="mt-2 mr-2"
onclick="PF('autocloseWidget').enable();PF('closeableWidget').enable();"/>
</div>
</div>
</h:form>
package org.primefaces.showcase.view.input;
import jakarta.annotation.PostConstruct;
import jakarta.faces.application.FacesMessage;
import jakarta.faces.context.FacesContext;
import jakarta.faces.view.ViewScoped;
import jakarta.inject.Named;
import java.io.Serializable;
import java.time.LocalTime;
import io.quarkus.runtime.annotations.RegisterForReflection;
@Named
@ViewScoped
@RegisterForReflection(serialization = true)
public class ClockPickerView implements Serializable {
private static final long serialVersionUID = 897540091000342926L;
private LocalTime time;
private LocalTime time2;
private LocalTime time3;
@PostConstruct
public void init() {
// Initialize time to 8:15 AM
time = LocalTime.of(8, 15);
time2 = LocalTime.of(9, 28);
time3 = LocalTime.of(13, 44);
}
public void showTime1() {
if (time != null) {
int hour = time.getHour();
int min = time.getMinute();
String message = String.format("Selected hour: %d, Selected min: %d", hour, min);
addMessage(FacesMessage.SEVERITY_INFO, "Info Message", message);
} else {
addMessage(FacesMessage.SEVERITY_ERROR, "Error Message", "Time is not selected.");
}
}
public void showTime2() {
if (time2 != null) {
addMessage(FacesMessage.SEVERITY_INFO, "Info Message", String.format("Ajax Event: %s", time2));
} else {
addMessage(FacesMessage.SEVERITY_ERROR, "Error Message", "Time is not selected.");
}
}
public void showTime3() {
if (time3 != null) {
addMessage(FacesMessage.SEVERITY_INFO, "Info Message", String.format("Ajax Event: %s", time3));
} else {
addMessage(FacesMessage.SEVERITY_ERROR, "Error Message", "Time is not selected.");
}
}
private void addMessage(FacesMessage.Severity severity, String summary, String detail) {
FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(severity, summary, detail));
}
public LocalTime getTime() {
return time;
}
public void setTime(LocalTime time) {
this.time = time;
}
public LocalTime getTime2() {
return time2;
}
public void setTime2(LocalTime time2) {
this.time2 = time2;
}
public LocalTime getTime3() {
return time3;
}
public void setTime3(LocalTime time3) {
this.time3 = time3;
}
}