CODEWITHSUNDEEP
angularngb-datepicker
angleUr
angleUr

Reputation: 893

Angular ngbDatePicker - do something when user selects a date from Calendar

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.

ngbDatePicker

What I've tried: The following in the html

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;
}

Upvotes: 1

Views: 2778

Answers (1)

angleUr
angleUr

Reputation: 893

I found it, it was (dateSelect)=

(dateSelect)="onDateSelected()"

Upvotes: 1

Related Questions