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

问题描述

当我选择一个数据时，它会用类似

的格式填充输入

DD/MM/YYYY

但我需要通过表格发送这些数据，当我在我的组件上执行 console.log 时

datapicker.component.ts

onFindAWhip(form: NgForm){const value = form.value;控制台日志(值)；}

我得到了一个完整的约会

2017 年 9 月 28 日星期四 00:00:00 GMT+0100(GMT 夏令时)

<块引用>

我需要重新格式化吗?

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

import { NativeDateAdapter } from '@angular/material';导出类 MyDateAdapter 扩展 NativeDateAdapter {格式(日期:日期，显示格式:对象):字符串{让天 = date.getDate();让月份 = date.getMonth();让年 = date.getFullYear();如果(显示格式==输入"){让pickupData = date.toDateString();让pickupDataArray =pickupData.split(" ");让 yearPicked =pickedDataArray[3];const without =pickupData.substring(0,pickupData.length-4);不带 + ' '+yearPicked 返回；} else if (displayFormat == "input-home") {return this._to2digit(day) + '/' + this._to2digit(month) +'/'+ year;}别的{返回 date.toDateString();}}私人_to2digit(n:数字){返回 ('00' + n).slice(-2);}}

datapicker.html

<button md-raised-button (click)="pickupTo.open()" class="search--icon"></button><input [mdDatepicker]="pickupTo"占位符="DD/MM/YYYY"名称=date_to"ngModel><md-datepicker touchUi="true" #pickupTo></md-datepicker></span>

解决方案

这是因为 ngModel 是一个 DateTime，并且包括所有该信息.如果您只想要 DD/MM/YYYY，则必须在您的 component.ts 中处理它.实际上，您可以在组件内使用 Angular 的 DatePipe 来快速轻松地为您执行此操作.

导入管道:

import { DatePipe } from '@angular/common'

构建访问:

constructor( 私有 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屋！