Angular 2 材质日期选择器值答案

【问题标题】：Angular 2 Material Datepicker ValueAngular 2 材质日期选择器值
【发布时间】：2017-06-04 16:19:58
【问题描述】：

我想使用Angular Material Datepicker 在我的页面中获取日期。我使用此代码，但无法弄清楚如何正确访问所选值。

<md-input-container>
  <input mdInput [mdDatepicker]="myDatepicker">
  <button mdSuffix [mdDatepickerToggle]="myDatepicker"></button>
</md-input-container>
<md-datepicker #myDatepicker></md-datepicker>

我在输入中尝试了[value] 字段，但我如何才能将日期发送到我的后端？谢谢。

【问题讨论】：

输入input: ngModel 如果您使用模板表单或formControl/formControlName 用于模型驱动..
我可以正确使用 min 字段，但不能正确使用 value 字段。添加 ngModel 没有帮助
输入ngModel就可以看到组件中字段的值了。

标签： angular datepicker angular-material2

【解决方案1】：

您可以使用ngModel 访问日期选择器值。 ngModel 需要在 input 标记中。见 Plunker demo。

【讨论】：

非常感谢您的演示。我之前曾尝试过，但直到那时我才意识到我有另一个名为“日期”的输入字段
很高兴它有帮助:)
谢谢 - 我做对了，只是我在输入中没有“名称”属性。帮助

【解决方案2】：

如docs 中所述，如果您愿意，可以使用两个事件(dateChange) 和(dateInput)。 $event 有 3 个 props，target 是 MatDatepickerInput，targetElement 是原生 HTML 元素，value 是 Date 对象。

<input matInput [matDatepicker]="pickerFrom" placeholder="From" 
      (dateChange)="changeFunc($event)"      <<---- you can send $event
      (dateChange)="dateInput($event.value)" <<---- or just $event.value 
>

【讨论】：

这似乎更好，因为朝着一个方向前进

【解决方案3】：

正如 Nehal 所说，您可以使用 [(ngModel)] 绑定；我也忘了"name"属性：

  <md-form-field>
    <input mdInput [(ngModel)]="myDateValue" name="myDate"
      [mdDatepicker]="picker" placeholder="Select a date">

【讨论】：

感谢您提及 name 属性。那是为我做的。