在angular 2材质中设置datepicker的默认日期

时间:2017-09-20 11:18:21

标签: angular angular-material2

我尝试使用material.angular.io创建日期选择器,但我需要为字段设置默认日期。在previose版本角度材料很容易。有人知道我现在该怎么办?

我的代码:

<input mdInput
       name="start_time"
       #start_time="ngModel"
       [mdDatepicker]="startDate"
       [min]="minDate"
       date="true"
       [(ngModel)]="planModel.start_time"
       placeholder="Choose a date">

    <md-datepicker-toggle mdSuffix [for]="startDate"></md-datepicker-toggle>
    <md-datepicker [startView]="dateStart" #startDate></md-datepicker>

3 个答案:

答案 0 :(得分:16)

您需要初始化日期模型。在您的ts代码中,在构造函数或获取planModel的方法中执行以下操作:

planModel.start_time = new Date(); // Current Date

链接到working demo

答案 1 :(得分:0)

如果您使用的是反应形式,以下是工作角度10代码:

component.ts

      this.youForm= this._formBuilder.group({


        StartDate: [new Date(), Validators.required],

      });

component.html不变

  <mat-form-field appearance="outline">
            <input matInput [matDatepicker]="StartDate" placeholder="Start date *" 
              formControlName="StartDate">
            <mat-label>Start Date *</mat-label>
            <mat-datepicker-toggle matSuffix [for]="StartDate"></mat-datepicker-toggle>
            <mat-datepicker #StartDate></mat-datepicker>
          </mat-form-field>

答案 2 :(得分:-2)

reactive form documentation中一样:

xxx.component.html

<mat-form-field>
  <input matInput 
    [matDatepicker]="matDatepicker" 
    [formControl]="dateFormControl"
    (dateChange)="onDateChanged('change', $event)"
    >
  <mat-datepicker-toggle matSuffix [for]="matDatepicker"></mat-datepicker-toggle>
  <mat-datepicker #matDatepicker></mat-datepicker>
</mat-form-field>

xxx.component.ts

currentDate: Date = new Date("12/15/18 00:00:00")
dateFormControl = new FormControl(new Date())

onSomeEvent(){
    this.dateFormControl.setValue(this.currentDate)
}