Goal: I would like to reset the text color in the matinput to black when a user selects (any) date from the ngbDatePicker CALENDAR. I set it to make text red if they type in a future date. I want it to go back to black if they select a date from the Calendar UI
Problem: I can't seem to detect when a user selects a date from the calendar. I don't need to know what date they select, only that they selected SOMETHING.
What I've tried: The following in the html
(change)=
- doesnt do anything
(select)=
- doesnt seem to do anything
(click)=
- this only registers when I click in the matinput text box, not when I click the calendar
As per SO articles: How to detect date selection in ng-bootstrap Datepicker on input field? , How to detect bootstrap datetimepicker change events within angular2 , https://ng-bootstrap.github.io/#/components/datepicker/examples
TypeScript:
onDateSelected() {
this.dateRed = false;
console.log("dateRed value: " + this.dateRed);
}
HTML:
<div class="input-group date-field-90">
<input matInput formControlName="dateOfBirth" class="form-control" (keypress)="dateEnter($event)"
[placeholder]="dateplaceholder" [ngClass]="{'dateRed' : dateRed}" ngbDatepicker #d="ngbDatepicker" [maxDate]="currentDate" (change)="onDateSelected()" [(ngModel)]="dob1"
#dobDate required>
<mat-icon (click)="d.toggle()">event</mat-icon>
</div>
CSS:
.dateRed{
color: red;
}
