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 473002769..407ac4243 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
@@ -68,7 +68,8 @@ protected enum PropertyKeys {
onafterhourselect,
onafterampmselect,
onbeforedone,
- onafterdone
+ onafterdone,
+ appendTo
}
public ClockPicker() {
@@ -240,6 +241,14 @@ public boolean isShowOnButton() {
return !"focus".equals(getShowOn());
}
+ public String getAppendTo() {
+ return (String) getStateHelper().eval(PropertyKeys.appendTo, "@(body)");
+ }
+
+ public void setAppendTo(String appendTo) {
+ getStateHelper().put(PropertyKeys.appendTo, appendTo);
+ }
+
public Locale calculateLocale(FacesContext fc) {
if (appropriateLocale == null) {
appropriateLocale = LocaleUtils.resolveLocale(fc, getLocale(), getClientId(fc));
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 e65863f74..52fe5dc52 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
@@ -35,6 +35,7 @@
import javax.faces.convert.Converter;
import javax.faces.convert.ConverterException;
+import org.primefaces.expression.SearchExpressionUtils;
import org.primefaces.extensions.util.Attrs;
import org.primefaces.renderkit.InputRenderer;
import org.primefaces.util.HTML;
@@ -138,6 +139,7 @@ private void encodeScript(final FacesContext context, final ClockPicker clockPic
final WidgetBuilder wb = getWidgetBuilder(context);
wb.init("ExtClockPicker", clockPicker);
+ wb.attr("appendTo", SearchExpressionUtils.resolveClientId(clockPicker.getAppendTo(), clockPicker));
wb.attr("placement", clockPicker.getPlacement(), "bottom");
wb.attr("align", clockPicker.getAlign(), "left");
wb.attr("autoclose", clockPicker.isAutoClose(), false);
diff --git a/core/src/main/resources/META-INF/resources/primefaces-extensions/clockpicker/0-clockpicker.js b/core/src/main/resources/META-INF/resources/primefaces-extensions/clockpicker/0-clockpicker.js
index c4594e4c6..accbc039e 100644
--- a/core/src/main/resources/META-INF/resources/primefaces-extensions/clockpicker/0-clockpicker.js
+++ b/core/src/main/resources/META-INF/resources/primefaces-extensions/clockpicker/0-clockpicker.js
@@ -366,7 +366,8 @@
pmtext: 'PM', // PM text
autoclose: false, // auto close when minute is selected
twelvehour: false, // change to 12 hour AM/PM clock from 24 hour
- vibrate: true // vibrate the device when dragging clock hand
+ vibrate: true, // vibrate the device when dragging clock hand
+ appendTo: $(document.body), // object to append popover
};
// Show or hide popover
@@ -383,10 +384,15 @@
height = element.outerHeight(),
placement = this.options.placement,
align = this.options.align,
+ appendToOffset = this.options.appendTo.offset(),
styles = {};
popover.show();
+ // Remove the referential offset
+ offset.left -= appendToOffset.left;
+ offset.top -= appendToOffset.top;
+
// Place the popover
switch (placement) {
case 'bottom':
@@ -438,8 +444,8 @@
// Initialize
if (! this.isAppended) {
- // Append popover to body
- $body = $(document.body).append(this.popover);
+ // Append popover to body or appendTo
+ $body = this.options.appendTo.append(this.popover);
this.isAppended = true;
}
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 f694fd218..d810d70f8 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
@@ -14,11 +14,18 @@ PrimeFaces.widget.ExtClockPicker = PrimeFaces.widget.BaseWidget.extend({
this.jqId = PrimeFaces.escapeClientId(cfg.id);
this.container = $(this.jqId);
this.jqEl = this.jqId + '_input';
- this.input = $(this.jqEl);
this.jq = $(this.jqEl);
this.cfg.donetext = PrimeFaces.getAriaLabel('close') || 'Close';
+ this.cfg.appendTo = PrimeFaces.utils.resolveDynamicOverlayContainer(this);
+ // setup input
+ this.input = $(this.jqEl);
PrimeFaces.skinInput(this.input);
+
+ // check if being used in dialog and set the parent
+ this.setupDialogSupport();
+
+ // create the clock picker
this.clockpicker = this.createClockPicker();
// pfs metadata
@@ -40,6 +47,17 @@ PrimeFaces.widget.ExtClockPicker = PrimeFaces.widget.BaseWidget.extend({
this.remove();
},
+ /**
+ * Sets up support for using the overlay color picker within an overlay dialog.
+ * @private
+ */
+ setupDialogSupport: function() {
+ var dialog = this.input[0].closest('.ui-dialog');
+ if (dialog) {
+ this.cfg.appendTo = $(PrimeFaces.escapeClientId(dialog.id));
+ }
+ },
+
/**
* Creates the clock picker and sets up events.
* @returns {JQuery} the clock picker
diff --git a/showcase/src/main/java/org/primefaces/extensions/showcase/controller/ClockPickerController.java b/showcase/src/main/java/org/primefaces/extensions/showcase/controller/ClockPickerController.java
index b665601c3..692bdad0b 100644
--- a/showcase/src/main/java/org/primefaces/extensions/showcase/controller/ClockPickerController.java
+++ b/showcase/src/main/java/org/primefaces/extensions/showcase/controller/ClockPickerController.java
@@ -43,11 +43,13 @@ public class ClockPickerController implements Serializable {
private LocalTime time;
private LocalTime time2;
+ private LocalTime time3;
public ClockPickerController() {
// Initialize time to 8:15 AM
time = LocalTime.of(8, 15);
time2 = LocalTime.of(9, 28);
+ time3 = LocalTime.of(13, 44);
}
public void showTime1() {
@@ -72,6 +74,15 @@ public void showTime2() {
}
}
+ 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));
}
@@ -92,4 +103,12 @@ public void setTime2(LocalTime time2) {
this.time2 = time2;
}
+ public LocalTime getTime3() {
+ return time3;
+ }
+
+ public void setTime3(LocalTime time3) {
+ this.time3 = time3;
+ }
+
}
\ 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 6e250f3fa..3810b88d5 100644
--- a/showcase/src/main/webapp/sections/clockpicker/example-basicUsage.xhtml
+++ b/showcase/src/main/webapp/sections/clockpicker/example-basicUsage.xhtml
@@ -19,6 +19,15 @@
+ Open In Dialog
+
+
+
+
+
+
+
+