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

请勿在{{1}}内部使用管道。另外，在ngModel

中使用双向绑定

ngModel

Answer 2

在 .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>

Angular 4+-如何从输入日期选择器中获取日期

2 个答案: