angular material 提交表单后日期选择器格式不同

Question

当我 select 一个数据时，它用

这样的格式填充输入

DD/MM/YYYY

但我需要通过表单发送该数据，当我在组件上执行 console.log 时

datapicker.component.ts

onFindAWhip(form: NgForm){
    const value = form.value;
    console.log(value);
 }

我得到了一个完整的约会对象

Thu Sep 28 2017 00:00:00 GMT+0100 (GMT Daylight Time)

do I have to reformat again ?

它已经在我的 DateAdapter 中完成，我试图从这里获取它，但我只是遇到错误

import { NativeDateAdapter }  from '@angular/material';

export class MyDateAdapter extends NativeDateAdapter {
   format(date: Date, displayFormat: Object): string {

      let day = date.getDate();
      let month = date.getMonth();
      let year = date.getFullYear();

      if (displayFormat == "input") {


          let pickupData = date.toDateString();
          let pickupDataArray = pickupData.split(" ");
          let yearPicked = pickupDataArray[3]; 

          const without = pickupData.substring(0, pickupData.length-4);

          return without + '     '+yearPicked ;

       } else if (displayFormat == "input-home") {
          return this._to2digit(day) + '/' + this._to2digit(month) +'/'+ year;
       }

       else{
        return date.toDateString();
      }
   }

   private _to2digit(n: number) {
       return ('00' + n).slice(-2);
   }

}

datapicker.html

<span class="calendar-to">
        <button md-raised-button (click)="pickupTo.open()" class="search--icon"></button>
        <input  [mdDatepicker]="pickupTo"
                placeholder="DD/MM/YYYY"
                name="date_to"
                ngModel>
        <md-datepicker touchUi="true" #pickupTo></md-datepicker>
    </span>

Answer 1

这是因为 ngModel 是一个 DateTime，并且包含所有信息。如果您只想要 DD/MM/YYYY，则必须在 component.ts 中处理它。实际上，您只需在组件内部使用 Angular's DatePipe 即可快速轻松地为您完成此操作。

导入管道：

import { DatePipe } from '@angular/common'

构建访问权限：

constructor( private datePipe: DatePipe ) { }

在方法中使用：

onFindAWhip(form: NgForm){
    const value = form.value;
    console.log(this.datePipe.transform(value, 'MM/dd/y'));
 }

angular material 提交表单后日期选择器格式不同

angular material datapicker different format after submit a form

angular-material2

angular