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 e75f94e81..670cf9c81 100644
--- a/js/src/date-range-picker.js
+++ b/js/src/date-range-picker.js
@@ -342,14 +342,17 @@ 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())
+
+        EventHandler.trigger(this._element, EVENT_START_DATE_CHANGE, {
+          date: date
+        })
       }
     })
 
@@ -381,13 +384,17 @@ 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: date
+        })
       }
     })
 
@@ -837,7 +844,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)