clockpicker: 12-hour format implementation

jxmai · Jan 28, 2024 · edd849a · edd849a
1 parent 5a4916d
commit edd849a
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 5 deletions.
diff --git a/core/src/main/java/org/primefaces/extensions/component/clockpicker/ClockPicker.java b/core/src/main/java/org/primefaces/extensions/component/clockpicker/ClockPicker.java
@@ -47,7 +47,8 @@ protected enum PropertyKeys {
         placement,
         align,
         autoclose,
-        vibrate;
+        vibrate,
+        twelvehour;
     }
 
     public ClockPicker() {
@@ -118,5 +119,13 @@ public Boolean getVibrate() {
     public void setVibrate(final Boolean vibrate) {
         getStateHelper().put(PropertyKeys.vibrate, vibrate);
     }
+
+    public Boolean getTwelvehour() {
+        return (Boolean) getStateHelper().eval(PropertyKeys.twelvehour, false); 
+    }
+
+    public void setTwelvehour(final Boolean twelvehour) {
+        getStateHelper().put(PropertyKeys.twelvehour, twelvehour);
+    }
 
 }
diff --git a/core/src/main/java/org/primefaces/extensions/component/clockpicker/ClockPickerRenderer.java b/core/src/main/java/org/primefaces/extensions/component/clockpicker/ClockPickerRenderer.java
@@ -24,6 +24,7 @@
 import java.io.IOException;
 import java.time.LocalTime;
 import java.time.format.DateTimeFormatter;
+import java.util.Locale;
 import java.util.Objects;
 
 import javax.el.ValueExpression;
@@ -40,7 +41,11 @@
 
 public class ClockPickerRenderer extends InputRenderer {
 
-    private static final DateTimeFormatter FORMATTER = DateTimeFormatter.ofPattern("HH:mm");
+    private static final DateTimeFormatter FORMATTER_24_HOUR = DateTimeFormatter.ofPattern("HH:mm");
+    // Note: We specify Locale.ENGLISH in the DateTimeFormatter to ensure consistent formatting, especially when interfacing with clockpicker.js.
+    // The JavaScript library generates time in the AM/PM format based on English conventions.
+    // Without this specification, different locales might cause errors during conversion, as clockpicker.js relies on the English-style AM/PM markers.
+    private static final DateTimeFormatter FORMATTER_12_HOUR = DateTimeFormatter.ofPattern("hh:mma").withLocale(Locale.ENGLISH);
 
     @Override
     public void decode(FacesContext context, UIComponent component) {
@@ -111,6 +116,7 @@ private void encodeScript(final FacesContext context, final ClockPicker clockPic
         wb.attr("align", clockPicker.getAlign(), "left");
         wb.attr("autoclose", clockPicker.getAutoclose(), false);
         wb.attr("vibrate", clockPicker.getVibrate(), true);
+        wb.attr("twelvehour", clockPicker.getTwelvehour(), false);
 
         encodeClientBehaviors(context, clockPicker);
         wb.finish();
@@ -132,7 +138,7 @@ protected static String getValueAsString(final FacesContext context, final Clock
                 return clockPicker.getConverter().getAsString(context, clockPicker, value);
             }
             else if (value instanceof LocalTime) {
-                return FORMATTER.format((LocalTime) value);
+                return clockPicker.getTwelvehour() ? ((LocalTime) value).format(FORMATTER_12_HOUR) : ((LocalTime) value).format(FORMATTER_24_HOUR);
             }
         }
         catch (Exception e) {
@@ -168,9 +174,10 @@ public Object getConvertedValue(FacesContext context, UIComponent component,
             ValueExpression ve = clockPicker.getValueExpression("value");
             if (ve != null) {
                 Class<?> type = ve.getType(context.getELContext());
-                if (type != null && type != Object.class && type.isAssignableFrom(LocalTime.class)) {
+                if (type != null && submittedValue != null && type.isAssignableFrom(LocalTime.class)) {
                     // Use built-in converter for LocalTime
-                    return LocalTime.parse(submittedValue, FORMATTER);
+                    return clockPicker.getTwelvehour() ? LocalTime.parse(submittedValue, FORMATTER_12_HOUR)
+                                : LocalTime.parse(submittedValue, FORMATTER_24_HOUR);
                 }
             }
         }

diff --git a/core/src/main/resources/META-INF/primefaces-extensions.taglib.xml b/core/src/main/resources/META-INF/primefaces-extensions.taglib.xml
@@ -10926,6 +10926,12 @@ See showcase for an example. Default null.]]>
             <required>false</required>
             <type>java.lang.Boolean</type>
         </attribute>
+        <attribute>
+            <description><![CDATA[enables twelve hour mode with AM & PM buttons. Default is false]]></description>
+            <name>twelvehour</name>
+            <required>false</required>
+            <type>java.lang.Boolean</type>
+        </attribute>
     </tag>
 
 </facelet-taglib>
diff --git a/showcase/src/main/webapp/sections/clockpicker/example-basicUsage.xhtml b/showcase/src/main/webapp/sections/clockpicker/example-basicUsage.xhtml
@@ -10,6 +10,7 @@
     <h:panelGroup id="timePickerGroup" layout="block">
         <p>Auto-Close Mode</p>
         <pe:clockpicker id="autoclose" autoclose="true" value="#{clockPickerController.time}"
+        					twelvehour="true"
                             widgetVar="autocloseWidget" />