@colijnit/corecomponents_v12 257.1.17 → 257.1.18

package/fesm2015/colijnit-corecomponents_v12.js

@@ -5446,6 +5446,23 @@ class InputDatePickerComponent extends BaseInputDatePickerDirective {
             this.overlayService.removeComponent(this._calendarComponentRef);
         }
     }
+    finalizeDate() {
+        if (this.isValidDateString(this.modelAsString)) {
+            const [year, month, day] = this.modelAsString.split('-').map(Number);
+            const date = new Date(year, month - 1, day);
+            this.setModel(date);
+        }
+    }
+    isValidDateString(value) {
+        const regex = /^\d{4}-\d{2}-\d{2}$/;
+        if (!regex.test(value))
+            return false;
+        const [year, month, day] = value.split('-').map(Number);
+        const date = new Date(year, month - 1, day);
+        return (date.getFullYear() === year &&
+            date.getMonth() === month - 1 &&
+            date.getDate() === day);
+    }
     handleDateChange(value) {
         if (value) {
             this.setModel(new Date(value));
@@ -5485,9 +5502,10 @@ InputDatePickerComponent.decorators = [
                      [placeholder]="placeholder"
                      (leftIconClick)="leftIconClick.emit($event)"
                      (rightIconClick)="toggleCalendar(true)"
-                     (blur)="handleDateChange(modelAsString)"
+                     (modelChange)="modelAsString = $event"
                      (clearIconClick)="handleClearIconClicked()"
                      [emptyPlace]="true"
+                     (keyup.enter)="finalizeDate()"
       ></co-input-text>
     `,
                 providers: [
@@ -6919,6 +6937,11 @@ DoubleCalendarModule.decorators = [
 ];
 
 class InputDateRangePickerComponent extends BaseInputDatePickerDirective {
+    constructor() {
+        super(...arguments);
+        this.EARLIEST_DATE = new Date(1900, 0, 1); // 1900-01-01
+        this.LATEST_DATE = new Date(2100, 11, 31); // 2100-12-31
+    }
     showClass() {
         return true;
     }
@@ -6959,43 +6982,71 @@ class InputDateRangePickerComponent extends BaseInputDatePickerDirective {
         }
     }
     handleFirstDateChanged(value) {
-        if (value) {
-            if (!this.model) {
-                this.setModel([]);
+        setTimeout(() => {
+            var _a, _b;
+            if (this.isValidDateString(value)) {
+                const [year, month, day] = value.split('-').map(Number);
+                const date = new Date(year, month - 1, day);
+                if (!this.model)
+                    this.setModel([]);
+                this.setModel([date, (_b = (_a = this.model) === null || _a === void 0 ? void 0 : _a[1]) !== null && _b !== void 0 ? _b : null]);
             }
-            this.setModel([new Date(value), this.model[1] ? this.model[1] : null]);
-        }
+        });
     }
     handleSecondDateChanged(value) {
-        if (value) {
-            if (!this.model) {
-                this.setModel([]);
+        setTimeout(() => {
+            var _a, _b;
+            if (this.isValidDateString(value)) {
+                const [year, month, day] = value.split('-').map(Number);
+                const date = new Date(year, month - 1, day);
+                if (!this.model)
+                    this.setModel([]);
+                this.setModel([(_b = (_a = this.model) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : null, date]);
             }
-            this.setModel([this.model[0] ? this.model[0] : null, new Date(value)]);
+        });
+    }
+    finalizeDates() {
+        let startDate = this.EARLIEST_DATE;
+        let endDate = this.LATEST_DATE;
+        if (this.isValidDateString(this.firstDateAsString)) {
+            const [y, m, d] = this.firstDateAsString.split('-').map(Number);
+            startDate = new Date(y, m - 1, d);
+        }
+        if (this.isValidDateString(this.secondDateAsString)) {
+            const [y, m, d] = this.secondDateAsString.split('-').map(Number);
+            endDate = new Date(y, m - 1, d);
         }
+        this.setModel([startDate, endDate]);
+    }
+    isValidDateString(value) {
+        const regex = /^\d{4}-\d{2}-\d{2}$/;
+        if (!regex.test(value))
+            return false;
+        const [yearStr, monthStr, dayStr] = value.split('-');
+        const [year, month, day] = [Number(yearStr), Number(monthStr), Number(dayStr)];
+        // Prevent ancient years or too-far future
+        if (year < 1900 || year > 2100)
+            return false;
+        const date = new Date(year, month - 1, day);
+        return (date.getFullYear() === year &&
+            date.getMonth() === month - 1 &&
+            date.getDate() === day);
     }
     modelSet() {
         this.setModelAsString();
     }
     setModelAsString() {
-        if (this.model[0]) {
-            const year = this.model[0].toLocaleString("default", { year: "numeric" });
-            const month = this.model[0].toLocaleString("default", { month: "2-digit" });
-            const day = this.model[0].toLocaleString("default", { day: "2-digit" });
-            this.firstDateAsString = `${year}-${month}-${day}`;
-        }
-        else {
-            this.firstDateAsString = ``;
-        }
-        if (this.model[1]) {
-            const year = this.model[1].toLocaleString("default", { year: "numeric" });
-            const month = this.model[1].toLocaleString("default", { month: "2-digit" });
-            const day = this.model[1].toLocaleString("default", { day: "2-digit" });
-            this.secondDateAsString = `${year}-${month}-${day}`;
-        }
-        else {
-            this.secondDateAsString = ``;
-        }
+        var _a, _b;
+        const isStartDefault = ((_a = this.model[0]) === null || _a === void 0 ? void 0 : _a.getTime()) === this.EARLIEST_DATE.getTime();
+        const isEndDefault = ((_b = this.model[1]) === null || _b === void 0 ? void 0 : _b.getTime()) === this.LATEST_DATE.getTime();
+        this.firstDateAsString = (!this.model[0] || isStartDefault) ? '' : this.formatDate(this.model[0]);
+        this.secondDateAsString = (!this.model[1] || isEndDefault) ? '' : this.formatDate(this.model[1]);
+    }
+    formatDate(date) {
+        const year = date.toLocaleString("default", { year: "numeric" });
+        const month = date.toLocaleString("default", { month: "2-digit" });
+        const day = date.toLocaleString("default", { day: "2-digit" });
+        return `${year}-${month}-${day}`;
     }
 }
 InputDateRangePickerComponent.decorators = [
@@ -7011,10 +7062,11 @@ InputDateRangePickerComponent.decorators = [
                        [leftIcon]="leftIcon"
                        [leftIconData]="leftIconData"
                        [placeholder]="placeholder"
-                       (blur)="handleFirstDateChanged(firstDateAsString)"
+                       (modelChange)="handleFirstDateChanged(firstDateAsString)"
                        (clearIconClick)="clearDate(0)"
                        (click)="handleFirstInputClick($event)"
                        [emptyPlace]="true"
+                       (keyup.enter)="finalizeDates()"
         ></co-input-text>
         <co-input-text #secondInput class="no-focus-line custom-height"
                        [(model)]= "secondDateAsString"
@@ -7023,10 +7075,11 @@ InputDateRangePickerComponent.decorators = [
                        [type]="'date'"
                        [rightIcon]="rightIcon"
                        (rightIconClick)="toggleCalendar()"
-                       (blur)="handleSecondDateChanged(secondDateAsString)"
+                       (modelChange)="handleSecondDateChanged(secondDateAsString)"
                        (clearIconClick)="clearDate(1)"
                        (click)="handleSecondInputClick($event)"
                        [emptyPlace]="true"
+                       (keyup.enter)="finalizeDates()"
         ></co-input-text>
       </div>
     `,
@@ -12574,7 +12627,7 @@ FilterItemComponent.decorators = [
                           <co-input-date-range [readonly]="readonly"
                                   [model]="[dateRangeStart, dateRangeEnd]"
                                   (modelChange)="handleModelChange($event)"
-                                  [placeholder]="'SELECT_DATE' | coreLocalize">
+                                  [placeholder]="'Kies datum' | coreLocalize">
                           </co-input-date-range>
                       </div>
                   </ng-template>