From 6497dbd3b2ddd43edf42e55e217ec40156cdbe17 Mon Sep 17 00:00:00 2001
From: Vlad Rusu <vlad.rusu@gmail.com>
Date: Fri, 18 Oct 2024 13:08:12 +0300
Subject: [PATCH 1/2] FIX (date-picker): dateChange.coreui.date-picker never
 triggered due to a type (.calendar instead of .calendars) FIX (date-picker
 and date-range-picker): EVENT_START_DATE_CHANGE / EVENT_END_DATE_CHANGE were
 not triggered when updated the date via input

---
 js/src/date-picker.js       | 15 ++++-----------
 js/src/date-range-picker.js |  8 ++++++++
 2 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/js/src/date-picker.js b/js/src/date-picker.js
index 9eb321331..423273b91 100644
--- a/js/src/date-picker.js
+++ b/js/src/date-picker.js
@@ -29,7 +29,6 @@ const EVENT_LOAD_DATA_API = `load${EVENT_KEY}${DATA_API_KEY}`
 
 const CLASS_NAME_SHOW = 'show'
 
-const SELECTOR_CALENDAR = '.calendar'
 const SELECTOR_DATA_TOGGLE = '[data-coreui-toggle="date-picker"]:not(.disabled):not(:disabled)'
 const SELECTOR_DATA_TOGGLE_SHOWN = `${SELECTOR_DATA_TOGGLE}.${CLASS_NAME_SHOW}`
 
@@ -65,20 +64,14 @@ class DatePicker extends DateRangePicker {
   }
 
   // Overrides
-  _addCalendarEventListeners() {
-    super._addCalendarEventListeners()
-    for (const calendar of SelectorEngine.find(SELECTOR_CALENDAR, this._element)) {
-      EventHandler.on(calendar, 'startDateChange.coreui.calendar', event => {
-        this._startDate = event.date
-        this._startInput.value = this._setInputValue(event.date)
-        this._selectEndDate = false
-        this._calendar.update(this._getCalendarConfig())
+  _addEventListeners() {
+    super._addEventListeners()
 
+    EventHandler.on(this._element, 'startDateChange.coreui.date-range-picker', event => {
         EventHandler.trigger(this._element, EVENT_DATE_CHANGE, {
           date: event.date
         })
-      })
-    }
+    })
   }
 
   // Static
diff --git a/js/src/date-range-picker.js b/js/src/date-range-picker.js
index e781fa3aa..920670056 100644
--- a/js/src/date-range-picker.js
+++ b/js/src/date-range-picker.js
@@ -323,6 +323,10 @@ class DateRangePicker extends BaseComponent {
         this._startDate = date
         this._calendarDate = date
         this._calendar.update(this._getCalendarConfig())
+
+        EventHandler.trigger(this._element, EVENT_START_DATE_CHANGE, {
+          date: date
+        })
       }
     })
 
@@ -361,6 +365,10 @@ class DateRangePicker extends BaseComponent {
         this._endDate = date
         this._calendarDate = date
         this._calendar.update(this._getCalendarConfig())
+
+        EventHandler.trigger(this._element, EVENT_END_DATE_CHANGE, {
+          date: value
+        })
       }
     })
 

From 8c7ccbcdae84ff200bf94050a067a39b62655f9d Mon Sep 17 00:00:00 2001
From: Vlad Rusu <vlad.rusu@gmail.com>
Date: Fri, 18 Oct 2024 15:32:01 +0300
Subject: [PATCH 2/2] - Send EVENT_START_DATE_CHANGE / EVENT_END_DATE_CHANGE
 also when date is empty / deleted - Better safeguard for inputDateParse /
 inputDateFormat when date is empty (prevent Invalid Date)

---
 js/src/date-range-picker.js | 29 ++++++++++++++++++++---------
 1 file changed, 20 insertions(+), 9 deletions(-)

diff --git a/js/src/date-range-picker.js b/js/src/date-range-picker.js
index 920670056..a1bae4c87 100644
--- a/js/src/date-range-picker.js
+++ b/js/src/date-range-picker.js
@@ -315,11 +315,10 @@ class DateRangePicker extends BaseComponent {
     })
 
     EventHandler.on(this._startInput, EVENT_INPUT, event => {
-      const date = this._config.inputDateParse ?
-        this._config.inputDateParse(event.target.value) :
-        getLocalDateFromString(event.target.value, this._config.locale, this._config.timepicker)
+      const date = this._parseDate(event.target.value)
 
-      if (date instanceof Date && date.getTime()) {
+      // valid date or empty date
+      if ((date instanceof Date && !isNaN(date)) || (date === null)) {
         this._startDate = date
         this._calendarDate = date
         this._calendar.update(this._getCalendarConfig())
@@ -358,16 +357,16 @@ class DateRangePicker extends BaseComponent {
     })
 
     EventHandler.on(this._endInput, EVENT_INPUT, event => {
-      const date = this._config.inputDateParse ?
-        this._config.inputDateParse(event.target.value) :
-        getLocalDateFromString(event.target.value, this._config.locale, this._config.timepicker)
-      if (date instanceof Date && date.getTime()) {
+      const date = this._parseDate(event.target.value)
+
+      // valid date or empty date
+      if ((date instanceof Date && !isNaN(date)) || (date === null)) {
         this._endDate = date
         this._calendarDate = date
         this._calendar.update(this._getCalendarConfig())
 
         EventHandler.trigger(this._element, EVENT_END_DATE_CHANGE, {
-          date: value
+          date: date
         })
       }
     })
@@ -813,7 +812,19 @@ class DateRangePicker extends BaseComponent {
     this._popper = Popper.createPopper(this._togglerElement, this._menu, popperConfig)
   }
 
+  _parseDate(str) {
+    if (!str)
+      return null;
+
+    return this._config.inputDateParse ?
+      this._config.inputDateParse(str) :
+      getLocalDateFromString(str, this._config.locale, this._config.timepicker)
+  }
+
   _formatDate(date) {
+    if (!date)
+      return '';
+
     if (this._config.inputDateFormat) {
       return this._config.inputDateFormat(
         date instanceof Date ? new Date(date) : convertToDateObject(date, this._config.selectionType)