From 6b114a723ae66508262ef495399eb5bfb7a525c6 Mon Sep 17 00:00:00 2001
From: melloware <mellowaredev@gmail.com>
Date: Sun, 28 Jan 2024 10:27:25 -0500
Subject: [PATCH] Clockpicker add more standard PF features

---
 .../component/clockpicker/ClockPicker.java    |  25 +-
 .../clockpicker/ClockPickerRenderer.java      |  10 +-
 .../component/timepicker/TimePicker.java      |  25 +-
 .../META-INF/primefaces-extensions.taglib.xml | 464 +++++++++++++++++-
 .../clockpicker/1-clockpicker-widget.js       |  30 +-
 .../sections/clockpicker/basicUsage.xhtml     |   4 +-
 .../clockpicker/example-basicUsage.xhtml      |  34 +-
 .../timePicker/example-basicUsage.xhtml       |   8 +-
 .../src/main/webapp/views/clockpicker.xhtml   |  11 +-
 9 files changed, 574 insertions(+), 37 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
index 507f293b8..a9e629a27 100644
--- a/core/src/main/java/org/primefaces/extensions/component/clockpicker/ClockPicker.java
+++ b/core/src/main/java/org/primefaces/extensions/component/clockpicker/ClockPicker.java
@@ -22,8 +22,9 @@
 package org.primefaces.extensions.component.clockpicker;
 
 import javax.faces.application.ResourceDependency;
-import javax.faces.component.html.HtmlInputText;
 
+import org.primefaces.component.api.AbstractPrimeHtmlInputText;
+import org.primefaces.component.api.InputHolder;
 import org.primefaces.component.api.Widget;
 
 @ResourceDependency(library = "primefaces", name = "components.css")
@@ -32,7 +33,7 @@
 @ResourceDependency(library = "primefaces", name = "core.js")
 @ResourceDependency(library = "primefaces-extensions", name = "clockpicker/clockpicker.css")
 @ResourceDependency(library = "primefaces-extensions", name = "clockpicker/clockpicker.js")
-public class ClockPicker extends HtmlInputText implements Widget {
+public class ClockPicker extends AbstractPrimeHtmlInputText implements Widget, InputHolder {
     public static final String CONTAINER_CLASS = "pe-clockpicker ui-widget ui-corner-all input-group clockpicker";
 
     public static final String COMPONENT_TYPE = "org.primefaces.extensions.component.ClockPicker";
@@ -57,6 +58,26 @@ public ClockPicker() {
     public String getFamily() {
         return COMPONENT_FAMILY;
     }
+
+    @Override
+    public String getInputClientId() {
+        return getClientId(getFacesContext()) + "_input";
+    }
+
+    @Override
+    public String getValidatableInputClientId() {
+        return getInputClientId();
+    }
+
+    @Override
+    public String getLabelledBy() {
+        return (String) getStateHelper().get("labelledby");
+    }
+
+    @Override
+    public void setLabelledBy(String labelledBy) {
+        getStateHelper().put("labelledby", labelledBy);
+    }
     
     public String getWidgetVar() {
         return (String) getStateHelper().eval(PropertyKeys.widgetVar, null);
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
index 0843992a7..2385ae952 100644
--- a/core/src/main/java/org/primefaces/extensions/component/clockpicker/ClockPickerRenderer.java
+++ b/core/src/main/java/org/primefaces/extensions/component/clockpicker/ClockPickerRenderer.java
@@ -33,11 +33,12 @@
 import javax.faces.convert.Converter;
 import javax.faces.convert.ConverterException;
 
-import org.primefaces.renderkit.CoreRenderer;
+import org.primefaces.renderkit.InputRenderer;
+import org.primefaces.util.HTML;
 import org.primefaces.util.LangUtils;
 import org.primefaces.util.WidgetBuilder;
 
-public class ClockPickerRenderer extends CoreRenderer {
+public class ClockPickerRenderer extends InputRenderer {
 
     private static final DateTimeFormatter FORMATTER = DateTimeFormatter.ofPattern("HH:mm");
 
@@ -87,6 +88,11 @@ private void encodeMarkup(FacesContext context, ClockPicker clockPicker, final S
             writer.writeAttribute("value", value, null);
         }
 
+        renderAccessibilityAttributes(context, clockPicker);
+        renderPassThruAttributes(context, clockPicker, HTML.INPUT_TEXT_ATTRS_WITHOUT_EVENTS);
+        renderDomEvents(context, clockPicker, HTML.INPUT_TEXT_EVENTS);
+        renderValidationMetadata(context, clockPicker);
+
         writer.endElement("input");
 
         writer.startElement("span", null);
diff --git a/core/src/main/java/org/primefaces/extensions/component/timepicker/TimePicker.java b/core/src/main/java/org/primefaces/extensions/component/timepicker/TimePicker.java
index 7331a8f32..79cae91ea 100644
--- a/core/src/main/java/org/primefaces/extensions/component/timepicker/TimePicker.java
+++ b/core/src/main/java/org/primefaces/extensions/component/timepicker/TimePicker.java
@@ -34,6 +34,7 @@
 import javax.faces.event.PhaseId;
 
 import org.primefaces.component.api.AbstractPrimeHtmlInputText;
+import org.primefaces.component.api.InputHolder;
 import org.primefaces.component.api.Widget;
 import org.primefaces.extensions.event.BeforeShowEvent;
 import org.primefaces.extensions.event.CloseEvent;
@@ -56,7 +57,7 @@
 @ResourceDependency(library = "primefaces-extensions", name = "primefaces-extensions.js")
 @ResourceDependency(library = "primefaces-extensions", name = "timepicker/timepicker.css")
 @ResourceDependency(library = "primefaces-extensions", name = "timepicker/timepicker.js")
-public class TimePicker extends AbstractPrimeHtmlInputText implements Widget {
+public class TimePicker extends AbstractPrimeHtmlInputText implements Widget, InputHolder {
 
     public static final String CONTAINER_CLASS = "pe-timepicker ui-widget ui-corner-all";
     public static final String INPUT_CLASS = "ui-inputfield ui-state-default ui-corner-all";
@@ -125,6 +126,26 @@ public String getFamily() {
         return COMPONENT_FAMILY;
     }
 
+    @Override
+    public String getInputClientId() {
+        return getClientId(getFacesContext()) + "_input";
+    }
+
+    @Override
+    public String getValidatableInputClientId() {
+        return getInputClientId();
+    }
+
+    @Override
+    public String getLabelledBy() {
+        return (String) getStateHelper().get("labelledby");
+    }
+
+    @Override
+    public void setLabelledBy(String labelledBy) {
+        getStateHelper().put("labelledby", labelledBy);
+    }
+
     public String getWidgetVar() {
         return (String) getStateHelper().eval(PropertyKeys.widgetVar, null);
     }
@@ -442,4 +463,4 @@ public Object saveState(FacesContext context) {
 
         return super.saveState(context);
     }
-}
+}
\ No newline at end of file
diff --git a/core/src/main/resources/META-INF/primefaces-extensions.taglib.xml b/core/src/main/resources/META-INF/primefaces-extensions.taglib.xml
index 03aae523f..476e84286 100755
--- a/core/src/main/resources/META-INF/primefaces-extensions.taglib.xml
+++ b/core/src/main/resources/META-INF/primefaces-extensions.taglib.xml
@@ -10422,26 +10422,482 @@ See showcase for an example. Default null.]]>
             <renderer-type>org.primefaces.extensions.component.ClockPickerRenderer</renderer-type>
         </component>
         <attribute>
-            <description><![CDATA[Unique identifier of the component in a namingContainer.]]></description>
+            <description>
+                <![CDATA[Unique identifier of the component in a namingContainer.]]>
+            </description>
             <name>id</name>
             <required>false</required>
             <type>java.lang.String</type>
         </attribute>
         <attribute>
-            <description><![CDATA[Boolean value to specify the rendering of the component, when set to false component will not be rendered.]]></description>
+            <description>
+                <![CDATA[Boolean value to specify the rendering of the component, when set to false component will not be rendered.]]>
+            </description>
             <name>rendered</name>
             <required>false</required>
             <type>java.lang.Boolean</type>
         </attribute>
         <attribute>
-            <description><![CDATA[Value of the component.]]>
+            <description>
+                <![CDATA[An el expression referring to a server side UIComponent instance in a backing bean.]]>
+            </description>
+            <name>binding</name>
+            <required>false</required>
+            <type>javax.faces.component.UIComponent</type>
+        </attribute>
+        <attribute>
+            <description>
+                <![CDATA[Value of the component.]]>
             </description>
             <name>value</name>
             <required>false</required>
             <type>java.lang.Object</type>
         </attribute>
         <attribute>
-            <description><![CDATA[Name of the client side widget.]]></description>
+            <description>
+                <![CDATA[An el expression or a literal text that defines a converter for the component. When it's an EL expression, it's resolved to a converter instance.
+    In case it's a static text, it must refer to a converter id.]]>
+            </description>
+            <name>converter</name>
+            <required>false</required>
+            <type>java.faces.convert.Converter</type>
+        </attribute>
+        <attribute>
+            <description>
+                <![CDATA[When set true, process validations logic is executed at apply request values phase for this component. Default is false.]]>
+            </description>
+            <name>immediate</name>
+            <required>false</required>
+            <type>java.lang.Boolean</type>
+        </attribute>
+        <attribute>
+            <description>
+                <![CDATA[Marks component as required.]]>
+            </description>
+            <name>required</name>
+            <required>false</required>
+            <type>java.lang.Boolean</type>
+        </attribute>
+        <attribute>
+            <description>
+                <![CDATA[A method expression referring to a method validationg the input.]]>
+            </description>
+            <name>validator</name>
+            <required>false</required>
+            <type>javax.faces.validator.Validator</type>
+        </attribute>
+        <attribute>
+            <description>
+                <![CDATA[A method binding expression referring to a method for handling a valuchangeevent.]]>
+            </description>
+            <name>valueChangeListener</name>
+            <required>false</required>
+            <type>javax.faces.event.ValueChangeListener</type>
+        </attribute>
+        <attribute>
+            <description>
+                <![CDATA[Message to display when required field validation fails.]]>
+            </description>
+            <name>requiredMessage</name>
+            <required>false</required>
+            <type>java.lang.String</type>
+        </attribute>
+        <attribute>
+            <description>
+                <![CDATA[Message to display when conversion fails.]]>
+            </description>
+            <name>converterMessage</name>
+            <required>false</required>
+            <type>java.lang.String</type>
+        </attribute>
+        <attribute>
+            <description>
+                <![CDATA[Message to display when validation fails.]]>
+            </description>
+            <name>validatorMessage</name>
+            <required>false</required>
+            <type>java.lang.String</type>
+        </attribute>
+        <attribute>
+            <description>
+                <![CDATA[Access key to transfer focus to the input element.]]>
+            </description>
+            <name>accesskey</name>
+            <required>false</required>
+            <type>java.lang.String</type>
+        </attribute>
+        <attribute>
+            <description>
+                <![CDATA[Alternate textual description of the input element.]]>
+            </description>
+            <name>alt</name>
+            <required>false</required>
+            <type>java.lang.String</type>
+        </attribute>
+        <attribute>
+            <description>
+                <![CDATA[Controls browser autocomplete behavior.]]>
+            </description>
+            <name>autocomplete</name>
+            <required>false</required>
+            <type>java.lang.String</type>
+        </attribute>
+        <attribute>
+            <description>
+                 <![CDATA[Defines text direction, valid values are "ltr" (default) and "rtl".]]>
+            </description>
+            <name>dir</name>
+            <required>false</required>
+            <type>java.lang.String</type>
+        </attribute>
+        <attribute>
+            <description>
+                <![CDATA[Disables the input element, default is false.]]>
+            </description>
+            <name>disabled</name>
+            <required>false</required>
+            <type>boolean</type>
+        </attribute>
+        <attribute>
+            <description>
+                <![CDATA[HTML5 inputmode attribute for hinting at the type of data this control has for touch devices to display appropriate virtual keyboard.]]>
+            </description>
+            <name>inputmode</name>
+            <required>false</required>
+            <type>java.lang.String</type>
+        </attribute>
+        <attribute>
+            <description>
+                <![CDATA[A localized user presentable name.]]>
+            </description>
+            <name>label</name>
+            <required>false</required>
+            <type>java.lang.String</type>
+        </attribute>
+        <attribute>
+            <description>
+                <![CDATA[Code describing the language used in the generated markup.]]>
+            </description>
+            <name>lang</name>
+            <required>false</required>
+            <type>java.lang.String</type>
+        </attribute>
+        <attribute>
+            <description>
+                <![CDATA[Maximum number of characters that may be entered in this field.]]>
+            </description>
+            <name>maxlength</name>
+            <required>false</required>
+            <type>int</type>
+        </attribute>
+        <attribute>
+            <description>
+                <![CDATA[Client side callback to execute when input element loses focus.]]>
+            </description>
+            <name>onblur</name>
+            <required>false</required>
+            <type>java.lang.String</type>
+        </attribute>
+        <attribute>
+            <description>
+                <![CDATA[Client side callback to execute when input element loses focus and its value has been modified since gaining focus.]]>
+            </description>
+            <name>onchange</name>
+            <required>false</required>
+            <type>java.lang.String</type>
+        </attribute>
+        <attribute>
+            <description>
+                <![CDATA[Client side callback to execute when input element is clicked.]]>
+            </description>
+            <name>onclick</name>
+            <required>false</required>
+            <type>java.lang.String</type>
+        </attribute>
+        <attribute>
+            <description>
+                <![CDATA[Client side callback to execute when input element is double clicked.]]>
+            </description>
+            <name>ondblclick</name>
+            <required>false</required>
+            <type>java.lang.String</type>
+        </attribute>
+        <attribute>
+            <description>
+                <![CDATA[Client side callback to execute when input element receives focus.]]>
+            </description>
+            <name>onfocus</name>
+            <required>false</required>
+            <type>java.lang.String</type>
+        </attribute>
+        <attribute>
+            <description>
+                <![CDATA[Client side callback to execute when a key is pressed down over input element.]]>
+            </description>
+            <name>onkeydown</name>
+            <required>false</required>
+            <type>java.lang.String</type>
+        </attribute>
+        <attribute>
+            <description>
+                <![CDATA[Client side callback to execute when a key is pressed and released over input element.]]>
+            </description>
+            <name>onkeypress</name>
+            <required>false</required>
+            <type>java.lang.String</type>
+        </attribute>
+        <attribute>
+            <description>
+                <![CDATA[Client side callback to execute when a key is released over input element.]]>
+            </description>
+            <name>onkeyup</name>
+            <required>false</required>
+            <type>java.lang.String</type>
+        </attribute>
+        <attribute>
+            <description>
+                <![CDATA[Client side callback to execute when a pointer input element is pressed down over input element.]]>
+            </description>
+            <name>onmousedown</name>
+            <required>false</required>
+            <type>java.lang.String</type>
+        </attribute>
+        <attribute>
+            <description>
+                <![CDATA[Client side callback to execute when a pointer input element is moved within input element.]]>
+            </description>
+            <name>onmousemove</name>
+            <required>false</required>
+            <type>java.lang.String</type>
+        </attribute>
+        <attribute>
+            <description>
+                <![CDATA[Client side callback to execute when a pointer input element is moved away from input element.]]>
+            </description>
+            <name>onmouseout</name>
+            <required>false</required>
+            <type>java.lang.String</type>
+        </attribute>
+        <attribute>
+            <description>
+                <![CDATA[Client side callback to execute when a pointer input element is moved onto input element.]]>
+            </description>
+            <name>onmouseover</name>
+            <required>false</required>
+            <type>java.lang.String</type>
+        </attribute>
+        <attribute>
+            <description>
+                <![CDATA[Client side callback to execute when a pointer input element is released over input element.]]>
+            </description>
+            <name>onmouseup</name>
+            <required>false</required>
+            <type>java.lang.String</type>
+        </attribute>
+        <attribute>
+            <description>
+                <![CDATA[Client side callback to execute when the mouse wheel rolls up or down over an element.]]>
+            </description>
+            <name>onwheel</name>
+            <required>false</required>
+            <type>java.lang.String</type>
+        </attribute>
+        <attribute>
+            <description>
+                <![CDATA[Client side callback to execute when text within input element is selected by user.]]>
+            </description>
+            <name>onselect</name>
+            <required>false</required>
+            <type>java.lang.String</type>
+        </attribute>
+        <attribute>
+            <description>
+                <![CDATA[Client side callback to execute when the user copies the content of an element.]]>
+            </description>
+            <name>oncut</name>
+            <required>false</required>
+            <type>java.lang.String</type>
+        </attribute>
+        <attribute>
+            <description>
+                <![CDATA[Client side callback to execute when the user cuts the content of an element.]]>
+            </description>
+            <name>oncopy</name>
+            <required>false</required>
+            <type>java.lang.String</type>
+        </attribute>
+        <attribute>
+            <description>
+                <![CDATA[Client side callback to execute when the user pastes some content in an element.]]>
+            </description>
+            <name>onpaste</name>
+            <required>false</required>
+            <type>java.lang.String</type>
+        </attribute>
+        <attribute>
+            <description>
+                <![CDATA[Client side callback to execute when an element gets user input.]]>
+            </description>
+            <name>oninput</name>
+            <required>false</required>
+            <type>java.lang.String</type>
+        </attribute>
+        <attribute>
+            <description>
+                <![CDATA[Client side callback to execute when a context menu is triggered.]]>
+            </description>
+            <name>oncontextmenu</name>
+            <required>false</required>
+            <type>java.lang.String</type>
+        </attribute>
+        <attribute>
+            <description>
+                <![CDATA[Client side callback to execute when an element is invalid.]]>
+            </description>
+            <name>oninvalid</name>
+            <required>false</required>
+            <type>java.lang.String</type>
+        </attribute>
+        <attribute>
+            <description>
+                <![CDATA[Client side callback to execute when the Reset button in a form is clicked.]]>
+            </description>
+            <name>onreset</name>
+            <required>false</required>
+            <type>java.lang.String</type>
+        </attribute>
+        <attribute>
+            <description>
+                <![CDATA[Client side callback to execute when the user writes something in a search field.]]>
+            </description>
+            <name>onsearch</name>
+            <required>false</required>
+            <type>java.lang.String</type>
+        </attribute>
+        <attribute>
+            <description>
+                <![CDATA[Client side callback to execute when an element is dragged.]]>
+            </description>
+            <name>ondrag</name>
+            <required>false</required>
+            <type>java.lang.String</type>
+        </attribute>
+        <attribute>
+            <description>
+                <![CDATA[Client side callback to execute at the end of a drag operation.]]>
+            </description>
+            <name>ondragend</name>
+            <required>false</required>
+            <type>java.lang.String</type>
+        </attribute>
+        <attribute>
+            <description>
+                <![CDATA[Client side callback to execute when an element has been dragged to a valid drop target.]]>
+            </description>
+            <name>ondragenter</name>
+            <required>false</required>
+            <type>java.lang.String</type>
+        </attribute>
+        <attribute>
+            <description>
+                <![CDATA[Client side callback to execute when an element leaves a valid drop target.]]>
+            </description>
+            <name>ondragleave</name>
+            <required>false</required>
+            <type>java.lang.String</type>
+        </attribute>
+        <attribute>
+            <description>
+                <![CDATA[Client side callback to execute when an element is being dragged over a valid drop target.]]>
+            </description>
+            <name>ondragover</name>
+            <required>false</required>
+            <type>java.lang.String</type>
+        </attribute>
+        <attribute>
+            <description>
+                <![CDATA[Client side callback to execute at the start of a drag operation.]]>
+            </description>
+            <name>ondragstart</name>
+            <required>false</required>
+            <type>java.lang.String</type>
+        </attribute>
+        <attribute>
+            <description>
+                <![CDATA[Client side callback to execute when dragged element is being dropped.]]>
+            </description>
+            <name>ondrop</name>
+            <required>false</required>
+            <type>java.lang.String</type>
+        </attribute>
+        <attribute>
+            <description>
+                <![CDATA[Client side callback to execute when an element's scrollbar is being scrolled.]]>
+            </description>
+            <name>onscroll</name>
+            <required>false</required>
+            <type>java.lang.String</type>
+        </attribute>
+        <attribute>
+            <description>
+                <![CDATA[Flag indicating that this input element will prevent changes by the user.]]>
+            </description>
+            <name>readonly</name>
+            <required>false</required>
+            <type>boolean</type>
+        </attribute>
+        <attribute>
+            <description>
+                <![CDATA[Number of characters used to determine the width of the input element.]]>
+            </description>
+            <name>size</name>
+            <required>false</required>
+            <type>int</type>
+        </attribute>
+        <attribute>
+            <description>
+                <![CDATA[Inline style of the component.]]>
+            </description>
+            <name>style</name>
+            <required>false</required>
+            <type>java.lang.String</type>
+        </attribute>
+        <attribute>
+            <description>
+                <![CDATA[Style class of the component.]]>
+            </description>
+            <name>styleClass</name>
+            <required>false</required>
+            <type>java.lang.String</type>
+        </attribute>
+        <attribute>
+            <description>
+                <![CDATA[Position of the element in the tabbing order.]]>
+            </description>
+            <name>tabindex</name>
+            <required>false</required>
+            <type>java.lang.String</type>
+        </attribute>
+        <attribute>
+            <description>
+                <![CDATA[Advisory tooltip information.]]>
+            </description>
+            <name>title</name>
+            <required>false</required>
+            <type>java.lang.String</type>
+        </attribute>
+        <attribute>
+            <description>
+                <![CDATA[The placeholder attribute specifies a short hint that describes the expected value of an input field.]]>
+            </description>
+            <name>placeholder</name>
+            <required>false</required>
+            <type>java.lang.String</type>
+        </attribute>
+        <attribute>
+            <description>
+                <![CDATA[Name of the client side widget.]]>
+            </description>
             <name>widgetVar</name>
             <required>false</required>
             <type>java.lang.String</type>
diff --git a/core/src/main/resources/META-INF/resources/primefaces-extensions/clockpicker/1-clockpicker-widget.js b/core/src/main/resources/META-INF/resources/primefaces-extensions/clockpicker/1-clockpicker-widget.js
index 7721b707d..a5c9f39d6 100644
--- a/core/src/main/resources/META-INF/resources/primefaces-extensions/clockpicker/1-clockpicker-widget.js
+++ b/core/src/main/resources/META-INF/resources/primefaces-extensions/clockpicker/1-clockpicker-widget.js
@@ -19,7 +19,7 @@ PrimeFaces.widget.ExtClockPicker = PrimeFaces.widget.BaseWidget.extend({
 
         this.clockpicker = this.jq.clockpicker(this.cfg);
         // pfs metadata
-        $(this.jqId + '_input').data(PrimeFaces.CLIENT_ID_DATA, this.id);
+        this.jq.data(PrimeFaces.CLIENT_ID_DATA, this.id);
         this.originalValue = this.jq.val();
 
     },
@@ -46,8 +46,8 @@ PrimeFaces.widget.ExtClockPicker = PrimeFaces.widget.BaseWidget.extend({
      * @function hide
      */
     hide: function () {
-        if (this.clockpicker) {
-            this.clockpicker.hide()
+        if (this.jq) {
+            this.jq.clockpicker("hide");
         }
     },
 
@@ -56,8 +56,8 @@ PrimeFaces.widget.ExtClockPicker = PrimeFaces.widget.BaseWidget.extend({
      * @function show
      */
     show: function () {
-        if (this.clockpicker) {
-            this.clockpicker.show()
+        if (this.jq) {
+            this.jq.clockpicker("show");
         }
     },
     /**
@@ -65,8 +65,24 @@ PrimeFaces.widget.ExtClockPicker = PrimeFaces.widget.BaseWidget.extend({
      * @function remove
      */
     remove: function () {
-        if (this.clockpicker) {
-            this.clockpicker.remove()
+        if (this.jq) {
+            this.jq.clockpicker("remove");
         }
+    },
+
+    /**
+     * Disables this input so that the user cannot enter a value anymore.
+     */
+    disable: function() {
+        this.remove();
+        PrimeFaces.utils.disableInputWidget(this.jq);
+    },
+
+    /**
+     * Enables this input so that the user can enter a value.
+     */
+    enable: function() {
+        PrimeFaces.utils.enableInputWidget(this.jq);
+        this.clockpicker = this.jq.clockpicker(this.cfg);
     }
 });
\ No newline at end of file
diff --git a/showcase/src/main/webapp/sections/clockpicker/basicUsage.xhtml b/showcase/src/main/webapp/sections/clockpicker/basicUsage.xhtml
index e9076d2d3..f1d908b4a 100644
--- a/showcase/src/main/webapp/sections/clockpicker/basicUsage.xhtml
+++ b/showcase/src/main/webapp/sections/clockpicker/basicUsage.xhtml
@@ -9,7 +9,7 @@
             <h:outputText value="ClockPicker"/>
         </f:facet>
         <h:panelGroup layout="block" styleClass="centerContent">
-            clockpicker
+            ClockPicker is a clock-style timepicker.
         </h:panelGroup>
 
         <h:panelGroup layout="block" styleClass="centerExample">
@@ -34,4 +34,4 @@ ${showcase:getFileContent('/org/primefaces/extensions/showcase/controller/ClockP
         </ui:include>
     </ui:define>
 </ui:composition>
-</html>
+</html>
\ No newline at end of file
diff --git a/showcase/src/main/webapp/sections/clockpicker/example-basicUsage.xhtml b/showcase/src/main/webapp/sections/clockpicker/example-basicUsage.xhtml
index 6b8b66ca6..220dd27c7 100644
--- a/showcase/src/main/webapp/sections/clockpicker/example-basicUsage.xhtml
+++ b/showcase/src/main/webapp/sections/clockpicker/example-basicUsage.xhtml
@@ -1,18 +1,30 @@
 <ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://xmlns.jcp.org/jsf/html"
-    xmlns:ui="http://xmlns.jcp.org/jsf/facelets" xmlns:p="http://primefaces.org/ui"
-    xmlns:pe="http://primefaces.org/ui/extensions" xmlns:f="http://xmlns.jcp.org/jsf/core">
+                xmlns:ui="http://xmlns.jcp.org/jsf/facelets" xmlns:p="http://primefaces.org/ui"
+                xmlns:pe="http://primefaces.org/ui/extensions">
 
     <p:growl id="growl" showDetail="true" showSummary="true">
-        <p:autoUpdate />
-    </p:growl>  
+        <p:autoUpdate/>
+    </p:growl>
 
-<!-- EXAMPLE-SOURCE-START -->
-    <div class="card">
-    <pe:clockpicker id="autoclose" autoclose="true" value="#{clockPickerController.time}" widgetVar="autocloseWidget"></pe:clockpicker>
-    <p:commandButton actionListener="#{clockPickerController.showTime}" update="growl" value="Show Time" styleClass="mt-2" />
-    </div>
+    <!-- EXAMPLE-SOURCE-START -->
+    <h:panelGroup id="timePickerGroup" layout="block">
+        <p>Auto-Close Mode</p>
+        <pe:clockpicker id="autoclose" autoclose="true" value="#{clockPickerController.time}"
+                            widgetVar="autocloseWidget" />
 
-    <pe:clockpicker id="closeable" autoclose="false" value="#{clockPickerController.time2}" widgetVar="closeableWidget"></pe:clockpicker>
 
-<!-- EXAMPLE-SOURCE-END -->
+        <p>Manual Close Mode</p>
+        <pe:clockpicker id="closeable" autoclose="false" value="#{clockPickerController.time2}"
+                            widgetVar="closeableWidget" />
+
+    </h:panelGroup>
+
+    <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();"/>
+    <p:commandButton id="submitButton" value="Submit" actionListener="#{clockPickerController.showTime}" update="timePickerGroup"
+                     styleClass="mt-2 mr-2" icon="pi pi-save"/>
+
+    <!-- EXAMPLE-SOURCE-END -->
 </ui:composition>
\ No newline at end of file
diff --git a/showcase/src/main/webapp/sections/timePicker/example-basicUsage.xhtml b/showcase/src/main/webapp/sections/timePicker/example-basicUsage.xhtml
index 8a4019e3a..cc85ac385 100644
--- a/showcase/src/main/webapp/sections/timePicker/example-basicUsage.xhtml
+++ b/showcase/src/main/webapp/sections/timePicker/example-basicUsage.xhtml
@@ -47,17 +47,17 @@
     </p>
 </h:panelGroup>
 
-<p:commandButton type="button" value="Disable time pickers" style="margin-top:10px;"
+<p:commandButton type="button" value="Disable time pickers" styleClass="mt-2 mr-2"
                  onclick="PF('inlineTimeWidget').disable();PF('popupTimeWidget').disable();
                      PF('spinnerTimeWidget').disable();PF('customTimeWidget').disable();
                      PF('popupBtnTimeWidget').disable();PF('spinnerBtnTimeWidget').disable();"/>
-<p:commandButton type="button" value="Enable time pickers" style="margin-top:10px;"
+<p:commandButton type="button" value="Enable time pickers" styleClass="mt-2 mr-2"
                  onclick="PF('inlineTimeWidget').enable();PF('popupTimeWidget').enable();
                      PF('spinnerTimeWidget').enable();PF('customTimeWidget').enable();
                      PF('popupBtnTimeWidget').enable();PF('spinnerBtnTimeWidget').enable();"/>
 <p:commandButton id="submitButton" value="Submit" actionListener="#{timePickerController.showTime}"
                  process="@this timePickerGroup" update="messages timeDialog timePickerGroup"
-                 style="margin-top:10px;" icon="pi pi-save"/>
+                 styleClass="mt-2 mr-2" icon="pi pi-save"/>
 
 <p:dialog id="timeDialog" header="Selected Values" visible="#{timePickerController.showTimeDialog}">
     <h:panelGrid columns="1" style="margin: 10px;">
@@ -70,4 +70,4 @@
     </h:panelGrid>
 </p:dialog>
     <!-- EXAMPLE-SOURCE-END -->
-</ui:composition>
+</ui:composition>
\ No newline at end of file
diff --git a/showcase/src/main/webapp/views/clockpicker.xhtml b/showcase/src/main/webapp/views/clockpicker.xhtml
index 154c628e6..3d82451be 100644
--- a/showcase/src/main/webapp/views/clockpicker.xhtml
+++ b/showcase/src/main/webapp/views/clockpicker.xhtml
@@ -8,9 +8,14 @@
             <h:outputText value="ClockPicker"/>
         </f:facet>
         <h:panelGroup layout="block" styleClass="centerContent">
-            Based on <h:outputLink id="lnkClockpicker" value="https://weareoutman.github.io/clockpicker/">clockpicker</h:outputLink> by weareoutman.
-        </h:panelGroup>
 
+        </h:panelGroup>
+        <h:panelGroup layout="block" styleClass="centerContent">
+            <h:graphicImage library="images" name="timepicker.png" alt="ClockPicker"/>
+            ClockPicker is a highly configurable component to integrate time inputs (hours / minutes) in a convenient way.
+            <p/>
+            Based on <h:outputLink id="lnkClockpicker" value="https://weareoutman.github.io/clockpicker/"  target="_blank" style="font-weight: bold; text-decoration: none; border-bottom: 1px dotted;">clockpicker</h:outputLink> by weareoutman.
+        </h:panelGroup>
     </ui:define>
     <ui:define name="useCases">
         <ui:include src="/sections/clockpicker/useCasesChoice.xhtml"/>
@@ -21,4 +26,4 @@
         </ui:include>
     </ui:define>
 </ui:composition>
-</html>
+</html>
\ No newline at end of file