I'm facing an issue and I could really use some assistance. The problem seems quite straightforward, but I've hit a roadblock. I have even created a stackblitz to showcase the problem, but let me explain it first. So, I've developed my own time range selector with a specific permitted range from 02-01-2019 to 09-01-2020, following the format mm-dd-yyyy. The UI for this selector is set up correctly and works flawlessly when selecting months by clicking on them. However, manual date entry is where I am encountering difficulties and require help.
In terms of validation, I am relying on moment for the following checks:
- Only years 2016 and 2019 are considered valid.
- The
startRangeshould not come afterendRange. - Date format must adhere to
mm-dd-yyyy.
Note: Both startRange and endRange are bound to [(ngModel)] for their respective input fields.
monthpicker.component.html
<div class="wrapper" [class.warning-border]="isApplied">
<input type="text" [(ngModel)]="startRange" class="start-range custom-input-field">
....
<input type="text" [(ngModel)]="endRange" class="end-range custom-input-field">
....
</div>
Highlighted below are key methods in monthpicker.component.ts:
onClick(indexClicked)- Used for mouse click selections of month names, functioning properly.triggerReflection()- This method should trigger validation upon keyboard entry of dates through thevalidate(startRange,endRange)method which checks against the specified criteria. A successful validation will lead to callingmonthReflection(), updating the month picker tray accordingly.
Here's an excerpt of the code:
triggerReflection() {
....
....
this.validate(this.startRange, this.endRange);
if (this.isValidRange) {
this.monthRangeReflection();
} else {
this.isValidRange = false;
}
} ....
}
Despite the above implementation, the reflection does not occur as expected. While exploring solutions, I came across using DoCheck to enable real-time validation during date entry:
ngDoCheck(): void {
this.validate(this.startRange, this.endRange);
console.log("ngDocheckCalled");
}
My ultimate goal is to automatically reflect valid date ranges on the month tray without requiring any additional keystrokes. I prefer avoiding the use of (keydown)=triggerReflection() as it would necessitate pressing keys. For the concerned component monthpicker, here's the stackblitz. Your assistance in fixing this particular issue would be greatly appreciated
If you need further details or clarification, please feel free to ask. Thank you in advance for any help provided, as I have exhausted numerous attempts and now turn to Stack Overflow as my final resort.