enhancement(Datepicker) avoid setting end date by input if no start d…

…ate is set
gselderslaghs · Dec 13, 2024 · 8b6ec21 · 8b6ec21
1 parent 94a3661
commit 8b6ec21
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 4 deletions.
diff --git a/spec/tests/datepicker/datepickerSpec.js b/spec/tests/datepicker/datepickerSpec.js
@@ -87,7 +87,7 @@ describe('Datepicker Plugin', () => {
       const day = 11;
       input.value = `${month < 10 ? `0${month}` : month}/${day}/${year}`;
       input.dispatchEvent(
-        new Event('change', { bubbles: true, cancelable: true })
+        new KeyboardEvent('change', { bubbles: true, cancelable: true })
       );
       keydown(input, 13);
       setTimeout(() => {
@@ -98,8 +98,8 @@ describe('Datepicker Plugin', () => {
         const selectMonthElem = document.querySelector('.datepicker-select.orig-select-month');
         const selectYearElem = document.querySelector('.datepicker-select.orig-select-year');
         const selectedDayElem = document.querySelector(`.datepicker-row td[data-day="${day}"]`);
-        expect(selectMonthElem.querySelector('option[selected="selected"]').value === (month -1).toString()).toEqual(true, `selected month should be ${month}, given value ${selectMonthElem.querySelector('option[selected="selected"]').value}`)
-        expect(selectYearElem.querySelector('option[selected="selected"]').value === year.toString()).toEqual(true, `selected year should be ${year}, given value ${selectYearElem.querySelector('option[selected="selected"]').value}`)
+        expect(selectMonthElem.querySelector('option[selected="selected"]').value === (month - 1).toString()).toEqual(true, `selected month should be ${month}, given value ${selectMonthElem.querySelector('option[selected="selected"]').value}`);
+        expect(selectYearElem.querySelector('option[selected="selected"]').value === year.toString()).toEqual(true, `selected year should be ${year}, given value ${selectYearElem.querySelector('option[selected="selected"]').value}`);
         expect(selectedDayElem.classList.contains('is-selected')).toEqual(true, `selected day should be ${day}, given value ${selectedDayElem.classList}`);
         done();
       }, 10);

diff --git a/src/datepicker.ts b/src/datepicker.ts
@@ -1147,8 +1147,11 @@ export class Datepicker extends Component<DatepickerOptions> {
 
   _handleInputChange = (e: Event) => {
     let date;
+    const el = (e.target as HTMLElement);
     // Prevent change event from being fired when triggered by the plugin
     if (e['detail']?.firedBy === this) return;
+    // Prevent change event from being fired if an end date is set without a start date
+    if(el == this.endDateEl && !this.date) return;
     if (this.options.parse) {
       date = this.options.parse((e.target as HTMLInputElement).value,
         typeof this.options.format === "function"
@@ -1159,7 +1162,7 @@ export class Datepicker extends Component<DatepickerOptions> {
       date = new Date(Date.parse((e.target as HTMLInputElement).value));
     }
     if (Datepicker._isDate(date)) {
-      this.setDate(date, false, (e.target as HTMLElement) == this.endDateEl);
+      this.setDate(date, false, el == this.endDateEl);
       if (e.type == 'date') {
         this.setDataDate(e, date);
         this.setInputValues();