如何使用 nameFormControl 从 datepicker angular-material 和 Reactive Form 格式化日期？角 6答案

【问题标题】：How to format date from datepicker angular-material and Reactive Form using nameFormControl ? Angular 6如何使用 nameFormControl 从 datepicker angular-material 和 Reactive Form 格式化日期？角 6
【发布时间】：2019-12-05 19:33:27
【问题描述】：

无法格式化日期。无论我试图给我这个日期“2019-12-11T23:00:00.000Z”还是以良好的格式返回我当前的日期。最大的问题是我不知道在哪里格式化日期。我想要像“Y-MM-DD”这样的日期。看我的代码：

export const MY_FORMATS = {
  parse: {
    dateInput: 'Y-MM-DD',
  },
  display: {
    dateInput: 'Y-MM-DD',
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY',
  },
};


@Component({
  selector: 'app-my-order',
  templateUrl: './my-order.component.html',
  styleUrls: ['./my-order.component.scss'],
  providers: [
    {
      provide: DateAdapter,
      useClass: MomentDateAdapter,
      deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS]
    },

    {provide: MAT_DATE_FORMATS, useValue: MY_FORMATS},
  ],
})




  ngOnInit() {  
    this.form = this.fb.group({
      deliveryDate: [moment().format('Y-MM-DD')] 
   // this is return mee full ISO date like a "2019-12-11T23:00:00.000Z"
    });



    <mat-form-field>
        <input formControlName="deliveryDate"  matInput [matDatepicker]="resultOfdate" placeholder="Izaberite datum isporuke" (dateInput)="first($event.value.format('YYYY-MM-D'))"  >
        <mat-datepicker-toggle matSuffix [for]="resultOfdate" ></mat-datepicker-toggle>
        <mat-datepicker #resultOfdate></mat-datepicker>
      </mat-form-field>

我还有再次获取我的日期外观模板的功能（上图）：

(dateInput)="first($event.value.format('YYYY-MM-D'))"

当我使用 console.log 时：

  first(e) {
    console.log("EE" , e );
    this.resultOfdate = e;
    //this is return me real date but when i pass this this.resultOfdate my control like a 

    this.form = this.fb.group({
      deliveryDate: [this.resultOfdate]
})

再次：交付日期：“2019-12-21T23:00:00.000Z”

我尝试了一切，但没有成功。我读过一些适配器，如果它们对我来说似乎比我目前的更复杂，我不会使用它们。

【问题讨论】：

标签： angular datepicker angular-material

【解决方案1】：

this.getDateTimeStringByUserTimeZone(moment(yourDate).format(), 'YYYY-MM-DDTHH:mm:ss')
getDateTimeStringByUserTimeZone(dateTimeLocal: string, format: string): string {
       return moment.tz(dateTimeLocal, this._ianaTimeZone).format(format);
      }



Date format  can be done in ts file  if it is Datagrid column you can use pipe to cover to format

【讨论】：