feat(datetime-picker): introduce preventCloseOnSelect to prevents the Picker from closing on date selection

Author: Sarin Udompanish

packages/elements/src/datetime-picker/__demo__/index.html

@@ -174,6 +174,7 @@
             <ef-checkbox id="inputTriggerDisabled">Input Trigger Disabled</ef-checkbox>
             <ef-checkbox id="inputDisabled">Input Disabled</ef-checkbox>
             <ef-checkbox id="popupDisabled">Popup Disabled</ef-checkbox>
+            <ef-checkbox id="preventCloseOnSelect">Prevent Close On Select</ef-checkbox>
           </p>
         </div>
       </div>
@@ -209,7 +210,8 @@
             weekendsOnly: dateTimePicker.weekendsOnly,
             inputTriggerDisabled: dateTimePicker.inputTriggerDisabled,
             inputDisabled: dateTimePicker.inputDisabled,
-            popupDisabled: dateTimePicker.popupDisabled
+            popupDisabled: dateTimePicker.popupDisabled,
+            preventCloseOnSelect: dateTimePicker.preventCloseOnSelect
           };
 
           consoleEl.value = JSON.stringify(data, undefined, 4);
@@ -399,6 +401,12 @@
             dateTimePicker.popupDisabled = value || undefined;
           });
 
+        document
+          .getElementById('preventCloseOnSelect')
+          .addEventListener('checked-changed', ({ detail: { value } }) => {
+            dateTimePicker.preventCloseOnSelect = value || undefined;
+          });
+
         const eventLog = [];
         const onEvent = (event) => {
           eventLog.unshift(`${event.type}: ${JSON.stringify(event.detail)}`);
@@ -599,7 +607,12 @@
       dynamicSingleDatetimePicker.addEventListener('before-cell-render', beforeCellRenderHandlerSingle);
     </script>
     <demo-block header="Slotted Cell Content + before-cell-render Event">
-      <ef-datetime-picker id="single-datetime-picker" view="2023-10" value="2023-10-10">
+      <ef-datetime-picker
+        id="single-datetime-picker"
+        view="2023-10"
+        value="2023-10-10"
+        prevent-close-on-select
+      >
         <div class="custom-cell" slot="2023-10-10">10</div>
         <div class="custom-cell" slot="2023-10-11">11</div>
         <div class="custom-cell" slot="2023-10">Oct</div>

packages/elements/src/datetime-picker/index.ts

@@ -343,6 +343,13 @@ export class DatetimePicker extends FormFieldElement implements MultiValue {
   @property({ type: Boolean, attribute: 'input-trigger-disabled' })
   public inputTriggerDisabled = false;
 
+  /**
+   * Prevents the Picker from closing on date selection,
+   * following the default behavior defined for each mode.
+   */
+  @property({ type: Boolean, attribute: 'prevent-close-on-select' })
+  public preventCloseOnSelect = false;
+
   /**
    * Disable input part of the picker
    */
@@ -994,6 +1001,9 @@ export class DatetimePicker extends FormFieldElement implements MultiValue {
     // Close popup if there is no time picker
     const newValues = this.values;
     if (!this.timepicker && newValues[0] && (this.range ? newValues[1] : true)) {
+      if (this.preventCloseOnSelect) {
+        return;
+      }
       this.setOpened(false);
 
       /**