Angular 2 Material 日期选择器值

Question

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

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

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

Answer 1

您可以使用 ngModel 访问日期选择器值。 ngModel 需要在 input 标签中。请参阅 Plunker demo。

Answer 2

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

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

Answer 3

如 docs 中所述，如果您愿意，可以使用 2 个事件 (dateChange) 和 (dateInput)。 $event 有 3 个属性，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 
>

Angular 2 Material 日期选择器值

Angular 2 Material Datepicker Value

datepicker

angular-material2

angular