提交表格后角度材料数据选择器的格式不同 [英] angular material datapicker different format after submit a form

问题描述

当我选择一个数据时，它会以

之类的格式填充输入

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)

我必须重新格式化吗?

它已经在我的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>

解决方案

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

导入管道:

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'));
 }

When I select a data it fills the input with a format like

DD/MM/YYYY

but I need to send that data through a form, when I do a console.log on my component

datapicker.component.ts

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

I'm getting a full date like

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

do I have to reformat again ?

it's already done in my DateAdapter, I've tried to get it from here but I just get errors

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>

解决方案

This is because the ngModel is a DateTime, and includes all that information. You will have to process it inside your component.ts if you only want DD/MM/YYYY. You can actually just use Angular's DatePipe inside your component to quickly and easily do this for you.

import the pipe:

import { DatePipe } from '@angular/common'

build access:

constructor( private datePipe: DatePipe ) { }

use in method:

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

这篇关于提交表格后角度材料数据选择器的格式不同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！