Fix primefaces#11424: DatePicker add hideOnRangeSelection

melloware · Feb 13, 2024 · b8e85a8 · b8e85a8
1 parent 6145940
commit b8e85a8
Show file tree

Hide file tree

Showing 7 changed files with 36 additions and 2 deletions.
diff --git a/docs/14_0_0/components/datepicker.md b/docs/14_0_0/components/datepicker.md
@@ -44,6 +44,7 @@ ajax selection and more.
 | flex | false | Boolean | Use modern PrimeFlex-Grid instead of classic Grid CSS. (primeflex.css must be included into the template.xhtml)
 | focusOnSelect | false | Boolean | When enabled, input receives focus after a value is picked.
 | hideOnDateTimeSelect | false | Boolean | Defines if the popup should be hidden when a time is selected.
+| hideOnRangeSelection | false | Boolean | Whether to hide the overlay on date selection is completed when selectionMode is range. Default is false.
 | hourFormat | '24' | String | Defines the hour format, valid values are '12' and '24'
 | immediate | false | Boolean | When set true, process validations logic is executed at apply request values phase for this component.
 | inline |  false | Boolean | Whether to show the datepicker inline or as a popup

diff --git a/docs/14_0_0/gettingstarted/whatsnew.md b/docs/14_0_0/gettingstarted/whatsnew.md
@@ -33,6 +33,9 @@ Look into [migration guide](https://primefaces.github.io/primefaces/14_0_0/#/../
 
 * DataExporter
     * Added `bufferSize` to control how many items are fetched at a time when `DataTable#lazy` is enabled.
+
+* DatePicker
+    * Added `hideOnRangeSelection` to control hiding the overlay on date selection is completed when selectionMode is range.
 
 * DataTable
     * JPALazyDataModel now supports case insensitive filters with `setCaseSensitive(false);`,

diff --git a/primefaces-showcase/src/main/webapp/ui/input/datepicker/datePickerJava8.xhtml b/primefaces-showcase/src/main/webapp/ui/input/datepicker/datePickerJava8.xhtml
@@ -123,7 +123,7 @@
                     <div class="field col-12 md:col-4">
                         <p:outputLabel for="range" value="Range Selection"/>
                         <p:datePicker id="range" selectionMode="range" value="#{calendarJava8View.range}"
-                                        readonlyInput="true"/>
+                                        readonlyInput="true" hideOnRangeSelection="true"/>
                     </div>
 
                     <div class="field col-12 md:col-4">

diff --git a/primefaces/src/main/java/org/primefaces/component/datepicker/DatePickerBase.java b/primefaces/src/main/java/org/primefaces/component/datepicker/DatePickerBase.java
@@ -79,6 +79,7 @@ public enum PropertyKeys {
         panelStyle,
         keepInvalid,
         hideOnDateTimeSelect,
+        hideOnRangeSelection,
         maxDateCount,
         numberOfMonths,
         view,
@@ -348,6 +349,14 @@ public void setHideOnDateTimeSelect(boolean hideOnDateTimeSelect) {
         getStateHelper().put(PropertyKeys.hideOnDateTimeSelect, hideOnDateTimeSelect);
     }
 
+    public boolean isHideOnRangeSelection() {
+        return (Boolean) getStateHelper().eval(PropertyKeys.hideOnRangeSelection, false);
+    }
+
+    public void setHideOnRangeSelection(boolean hideOnRangeSelection) {
+        getStateHelper().put(PropertyKeys.hideOnRangeSelection, hideOnRangeSelection);
+    }
+
     public int getMaxDateCount() {
         return (Integer) getStateHelper().eval(PropertyKeys.maxDateCount, Integer.MAX_VALUE);
     }

diff --git a/primefaces/src/main/java/org/primefaces/component/datepicker/DatePickerRenderer.java b/primefaces/src/main/java/org/primefaces/component/datepicker/DatePickerRenderer.java
@@ -175,6 +175,8 @@ else if (!isValueBlank(value)) {
         DateFormatSymbols symbols = new DateFormatSymbols(locale);
         String[] ampm = symbols.getAmPmStrings();
 
+        String selectionMode = datePicker.getSelectionMode();
+
         wb.attr("defaultDate", defaultDate, null)
             .attr("inline", datePicker.isInline())
             .attr("userLocale", locale.toString())
@@ -190,7 +192,7 @@ else if (!isValueBlank(value)) {
             .attr("yearRange", datePicker.getYearRange(), null)
             .attr("minDate", getMinMaxDate(context, datePicker, datePicker.getMindate(), false), null)
             .attr("maxDate", getMinMaxDate(context, datePicker, datePicker.getMaxdate(), true), null)
-            .attr("selectionMode", datePicker.getSelectionMode(), null)
+            .attr("selectionMode", selectionMode, null)
             .attr("showOnFocus", datePicker.isShowOnFocus())
             .attr("shortYearCutoff", datePicker.getShortYearCutoff(), null)
             .attr("monthNavigator", datePicker.isMonthNavigator(), false)
@@ -275,6 +277,10 @@ else if (!isValueBlank(value)) {
                 .attr("hideOnDateTimeSelect", datePicker.isHideOnDateTimeSelect(), false);
         }
 
+        if ("range".equalsIgnoreCase(selectionMode)) {
+            wb.attr("hideOnRangeSelection", datePicker.isHideOnRangeSelection(), false);
+        }
+
         String mask = datePicker.getMask();
         if (mask != null && !"false".equals(mask)) {
             wb.attr("mask", resolveMask(datePicker, mask))

diff --git a/primefaces/src/main/resources/META-INF/primefaces-p.taglib.xml b/primefaces/src/main/resources/META-INF/primefaces-p.taglib.xml
@@ -32857,6 +32857,14 @@
             <required>false</required>
             <type>java.lang.Boolean</type>
         </attribute>
+        <attribute>
+            <description>
+                <![CDATA[Whether to hide the overlay on date selection is completed when selectionMode is range. Default is false.]]>
+            </description>
+            <name>hideOnRangeSelection</name>
+            <required>false</required>
+            <type>java.lang.Boolean</type>
+        </attribute>
         <attribute>
             <description>
                 <![CDATA[Maximum number of selectable dates in multiple mode. Default is java.lang.Integer.MAX_VALUE.]]>

diff --git a/primefaces/src/main/resources/META-INF/resources/primefaces/datepicker/0-datepicker.js b/primefaces/src/main/resources/META-INF/resources/primefaces/datepicker/0-datepicker.js
@@ -64,6 +64,7 @@
             stepMillisecond: 1,
             shortYearCutoff: '+10',
             hideOnDateTimeSelect: false,
+            hideOnRangeSelection: false,
             userLocale: null,
             locale: {
                 firstDayOfWeek: 0,
@@ -2860,6 +2861,12 @@
                     $this.hideOverlay();
                 }, 100);
             }
+
+            if (!this.options.inline && this.isRangeSelection() && this.options.hideOnRangeSelection && this.value && this.value[1]) {
+                PrimeFaces.queueTask(function() {
+                    $this.hideOverlay();
+                }, 100);
+            }
 
             if (event) {
                 event.preventDefault();