2017-06-04 119 views
7

我想使用Angular Material Datepicker来获取我的页面的日期。 我使用此代码,但无法弄清楚如何正确访问选定的值。Angular 2 Material日期选择器值

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

我试着输入[value]场,但我怎么能得到的日期将其发送给我的后台? 谢谢

+0

放在'input':'ngModel'如果你使用模板的形式或'formControl' /'formControlName'用于驱动模型.. – developer033

+0

我能够正确用户分领域,而不是价值领域。添加ngModel没有帮助 – hawxs

+0

放入'ngModel'可以看到组件中字段的值。 – developer033

回答

7

您可以通过使用ngModel访问datepicker值。 ngModel需要位于input标签中。参见Plunker demo

+0

非常感谢您的演示。我曾尝试过,但只有那么我realiased我有另一个输入字段的名称'日期' – hawxs

+0

很高兴它帮助:) – Nehal

+0

谢谢 - 我有它的权利,除了我没有输入“名称”属性。 帮助 –

0

正如Nehal所说,你可以使用[(ngModel)]绑定;我也忘了"name"属性附加伤害:

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

docs表示有2个事件(dateChange)(dateInput),如果你喜欢,可以使用。 $event有3个道具,target是原生HTML元素的MatDatepickerInput,targetElement,以及,它是Date对象。

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