MatDatepicker 日期未定义答案

【问题标题】：MatDatepicker date undefinedMatDatepicker 日期未定义
【发布时间】：2018-01-29 17:51:23
【问题描述】：

我在将 matdatepicker 中输入的日期传递给方法时遇到问题。

sn-p代码如下：

HTML：

<div class="div1">
   <form ng-controller="formCtrl" >
      <label style="float:left;padding:7px;"> From : </label>
      <mat-form-field style="float:left;padding:7px;">
        <input type="date" matInput [matDatepicker]="picker1" placeholder="Choose a date" ng-model="fromDate">
        <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
        <mat-datepicker #picker1></mat-datepicker>
      </mat-form-field>
      <label style="float:left;padding:7px;"> To : </label>

      <mat-form-field style="float:left;padding:7px;">
        <input type="date" matInput [matDatepicker]="picker2" placeholder="Choose a date" ng-model="toDate">
        <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
        <mat-datepicker #picker2></mat-datepicker>
      </mat-form-field>
      <button type="submit" class="btn btn-info btn-sm" style="float:left;padding:8px;" (click)="getJobsByDateRange(fromDate,toDate)">
        <b>Submit</b></button>
   </form>
</div>

TS：

getJobsByDateRange(fromDate:Date, toDate:Date){
console.log(fromDate);
}

这是我在控制台中得到的输出：

“未定义”。

如何以 dd/MM/yyyy 格式打印日期？

【问题讨论】：

你可以试试 [value]="fromDate" 而不是 ng-model。
这是最新的角度检查stackblitz.com/edit/…

标签： html angular angular-material2

【解决方案1】：

ng-model="fromDate"

这在 Angular 中不再存在。改用这个。

[(ngModel)]="fromDate"

【讨论】：

【解决方案2】：

HTML

 <div class="div1">
       <form (ngSubmit)="onSubmit(f)" #f="ngForm" >
          <mat-form-field class="example-full-width mat-form-field-infix1">
            <input matInput [matDatepicker]="picker" placeholder="Choose a date" name="eventDate" [(ngModel)]="eventobj.eventDate" #eventDate="ngModel"
              required>
            <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
            <mat-datepicker #picker></mat-datepicker>

          </mat-form-field>
           <button mat-raised-button color="primary">Add Event</button>
       </form>
    </div>

TS：

eventobj = {


    eventDate: "Date",

  }

   onSubmit() {
   console.log(this.eventobj.eventDate);

   }

【讨论】：

谢谢。你能帮我把它打印成 dd/MM/yyyy 格式吗？
好的，我会分享
使用 Ts 文件获取值 dateobj - dateobj = this.eventobj.eventDate;在 HTML {{ dateobj |日期：'dd/MM/yyyy'}}

【解决方案3】：

我猜你正在使用角度材料 2 代码来表示角度 1。

请访问以下链接以获取角度 1 的材料日期选择器。

https://material.angularjs.org/latest/demo/datepicker

【讨论】：

我实际上是在使用 Angular 2。
您已经在 Angular 1 语法中使用了 ng-controller ng-model。
在 Angular 2 中，这些事情的处理方式不同。