Angular 4+ - Как получить дату из ввода DatePicker

Question

Я новичок в угловой.

У меня есть ввод даты выбора.Я хочу получить / выбрать дату, выбранную в средстве выбора даты.

Код: HTML-файл:

 <input class="form-control m-input " id="m_datepicker_2_validate" placeholder="Select Date" readonly="" type="text">

Я пытаюсь console.log выбранной даты.
ВВ файле component.ts я добавил переменную staff_date_booking : Date; и создал функцию

bookStaffEmployeeDate(){
        console.log("This is the DATE:", this.staff_book_date);
    }

, а в html добавил

 <input [ngModel]="staff_book_date | date:'yyyy-MM-dd'" class="form-control m-input " id="m_datepicker_2_validate" placeholder="Select Date" readonly="" type="text">

После выбора даты яя вызываю эту функцию (нажмите), но я получаю this.staff_book_date как неопределенное.

Как сохранить выбранную дату в такой переменной, как staff_book_date

Answer 1

Создайте свойство в вашем файле .ts и сделайте с ним двустороннюю привязку в вашем .html

. Внесите следующие изменения

.component.ts

staff_book_date : any;

bookStaffEmployeeDate(){
        console.log("This is the DATE:", this.staff_book_date);
}

component.html

<input [(ngModel)]="staff_book_date" class="form-control m-input " id="m_datepicker_2_validate" placeholder="Select Date" type="date">
<button (click)="bookStaffEmployeeDate()">Click Me</button>

Answer 2

Не используйте трубы внутри ngModel.Также используйте двустороннюю привязку в ngModel

<input [(ngModel)]="staff_book_date"