feat(DatePicker, DateRangePicker): add inputOnChangeDelay option with 750ms default

  - Implement debounced input handling for manual date entry
  - Add configurable delay to prevent excessive updates while typing
  - Include timeout cleanup in dispose method for memory management
  - Update documentation with new option details

Author: mrholek

docs/content/forms/date-picker.md

@@ -393,6 +393,7 @@ const datePickerList = datePickerElementList.map(datePickerEl => {
 | `indicator` | boolean | `true` | Toggle visibility or set the content of the input indicator. |
 | `inputDateFormat` | function, null | `null` | Custom function to format the selected date into a string according to a custom format. |
 | `inputDateParse` | function, null | `null` | Custom function to parse the input value into a valid Date object. |
+| `inputOnChangeDelay` | number | `750` | Delay in milliseconds before processing manual date input changes. |
 | `inputReadOnly` | boolean | `false` | Toggle the readonly state for the component. |
 | `invalid` | boolean | `false` | Toggle the invalid state for the component. |
 | `locale` | string | `'default'` | Sets the default locale for components. If not set, it is inherited from the navigator.language. |

docs/content/forms/date-range-picker.md

@@ -446,6 +446,7 @@ const dateRangePickerList = dateRangePickerElementList.map(dateRangePickerEl =>
 | `indicator` | boolean | `true` | Toggle visibility or set the content of the input indicator. |
 | `inputDateFormat` | function, null | `null` | Custom function to format the selected date into a string according to a custom format. |
 | `inputDateParse` | function, null | `null` | Custom function to parse the input value into a valid Date object. |
+| `inputOnChangeDelay` | number | `750` | Delay in milliseconds before processing manual date input changes. |
 | `inputReadOnly` | boolean | `false` | Toggle the readonly state for the component. |
 | `invalid` | boolean | `false` | Toggle the invalid state for the component. |
 | `locale` | string | `'default'` | Sets the default locale for components. If not set, it is inherited from the navigator.language. |

js/src/date-range-picker.js

@@ -94,6 +94,7 @@ const Default = {
   footer: false,
   inputDateFormat: null,
   inputDateParse: null,
+  inputOnChangeDelay: 750,
   inputReadOnly: false,
   invalid: false,
   indicator: true,
@@ -147,6 +148,7 @@ const DefaultType = {
   indicator: 'boolean',
   inputDateFormat: '(function|null)',
   inputDateParse: '(function|null)',
+  inputOnChangeDelay: 'number',
   inputReadOnly: 'boolean',
   invalid: 'boolean',
   locale: 'string',
@@ -204,6 +206,8 @@ class DateRangePicker extends BaseComponent {
     this._timePickerEnd = null
     this._timePickerStart = null
     this._togglerElement = null
+    this._startInputTimeout = null
+    this._endInputTimeout = null
 
     this._createDateRangePicker()
     this._createDateRangePickerCalendars()
@@ -272,6 +276,14 @@ class DateRangePicker extends BaseComponent {
       this._popper.destroy()
     }
 
+    if (this._startInputTimeout) {
+      clearTimeout(this._startInputTimeout)
+    }
+
+    if (this._endInputTimeout) {
+      clearTimeout(this._endInputTimeout)
+    }
+
     super.dispose()
   }
 
@@ -349,18 +361,24 @@ class DateRangePicker extends BaseComponent {
     })
 
     EventHandler.on(this._startInput, EVENT_INPUT, event => {
-      const date = this._parseDate(event.target.value)
-
-      // valid date or empty date
-      if ((date instanceof Date && !Number.isNaN(date)) || (date === null)) {
-        this._startDate = date
-        this._calendarDate = date
-        this._calendar.update(this._getCalendarConfig())
+      if (this._startInputTimeout) {
+        clearTimeout(this._startInputTimeout)
       }
 
-      EventHandler.trigger(this._element, EVENT_START_DATE_CHANGE, {
-        date
-      })
+      this._startInputTimeout = setTimeout(() => {
+        const date = this._parseDate(event.target.value)
+
+        // valid date or empty date
+        if ((date instanceof Date && !Number.isNaN(date)) || (date === null)) {
+          this._startDate = date
+          this._calendarDate = date
+          this._calendar.update(this._getCalendarConfig())
+        }
+
+        EventHandler.trigger(this._element, EVENT_START_DATE_CHANGE, {
+          date
+        })
+      }, this._config.inputOnChangeDelay)
     })
 
     EventHandler.on(this._startInput.form, EVENT_SUBMIT, () => {
@@ -391,18 +409,24 @@ class DateRangePicker extends BaseComponent {
     })
 
     EventHandler.on(this._endInput, EVENT_INPUT, event => {
-      const date = this._parseDate(event.target.value)
-
-      // valid date or empty date
-      if ((date instanceof Date && !Number.isNaN(date)) || (date === null)) {
-        this._endDate = date
-        this._calendarDate = date
-        this._calendar.update(this._getCalendarConfig())
+      if (this._endInputTimeout) {
+        clearTimeout(this._endInputTimeout)
       }
 
-      EventHandler.trigger(this._element, EVENT_END_DATE_CHANGE, {
-        date
-      })
+      this._endInputTimeout = setTimeout(() => {
+        const date = this._parseDate(event.target.value)
+
+        // valid date or empty date
+        if ((date instanceof Date && !Number.isNaN(date)) || (date === null)) {
+          this._endDate = date
+          this._calendarDate = date
+          this._calendar.update(this._getCalendarConfig())
+        }
+
+        EventHandler.trigger(this._element, EVENT_END_DATE_CHANGE, {
+          date
+        })
+      }, this._config.inputOnChangeDelay)
     })
 
     EventHandler.on(window, EVENT_RESIZE, () => {