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

【问题标题】：Angular 4+ - How to fetch date from input datepickerAngular 4+ - 如何从输入日期选择器中获取日期
【发布时间】：2018-10-25 06:06:31
【问题描述】：

我是 Angular 新手。

我有一个输入日期选择器。我想获取/获取在日期选择器中选择的日期。

代码：Html 文件：

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

我正在尝试控制台记录所选日期。
在 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 这样的变量中

【问题讨论】：

尝试将输入标签中的[ngModel] 更改为[(ngModel)]。
做到了，仍然不确定。
也许您在选择 staff_book_date 的值之前调用 bookStaffEmployeeDate()
不，是在选择日期之后。在日期选择器之后还有另一个输入，单击它时我调用了该函数。
试试stackblitz.com/edit/angular-vbukxm?embed=1&file=src/app/…

标签： angular datepicker

【解决方案1】：

不要在ngModel 内使用管道。另外，在ngModel中使用双向绑定

<input [(ngModel)]="staff_book_date"

【讨论】：

移除了管道并在 ngModel 中添加了两种方式绑定，但仍然显示未定义。
删除管道后没有控制台错误。控制台输出：这是日期：未定义
你在哪里调用 bookStaffEmployeeDate 方法
在我添加的日期选择器之后有另一个输入字段 (click)="bookStaffEmployeeDate()" 在输入字段上。

【解决方案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>

【讨论】：

如果我尝试创建 2 路绑定模型，它会给出有关管道的错误。我在控制台日志中遇到的错误：错误错误：未捕获（承诺中）：错误：模板解析错误：解析器错误：在 [staff_book_date | 中的第 19 列的操作表达式中不能有管道date:'yyyy-MM-dd'=$event] in ng:///ServiceModule/ServicesComponent.html@809:40 ("
移除管道双向绑定。
如果你想使用管道格式化你的输入，检查这个link
移除管道后，我没有收到任何错误，但控制台日志显示日期未定义。控制台日志：这是日期：未定义
如果您没有在输入框中输入任何值，它将是未定义的，因为我们已声明 staff_book_date 未定义它。此外，您已将输入设置为只读，您也无法对其进行编辑。