角反应形式材料日期选择器手动输入格式DD/MM/YYYY

Posted 2023-05-07

【中文标题】角反应形式材料日期选择器手动输入格式DD/MM/YYYY

【英文标题】：Angular reactive Form material Date picker manual input format DD/MM/YYYY

【发布时间】：2020-02-21 18:27:47

【问题描述】：

我想更改 datePicker 的输入格式，默认是 MM/DD/YYYY 我想将其更改为 DD/MM/YYYY。 html代码：

<mat-form-field>
    <mat-label>Date de creation min</mat-label>
    <input formControlName="dateDebut" matInput [matDatepicker]="pickerCreationMin"
           placeholder="jj/mm/aaaa">
    <mat-datepicker-toggle matSuffix [for]="pickerCreationMin"></mat-datepicker-toggle>
    <mat-datepicker #pickerCreationMin></mat-datepicker>
</mat-form-field>

格式选择器.ts

import  NativeDateAdapter  from '@angular/material';
import  MatDateFormats  from '@angular/material/core';

export class AppDateAdapter extends NativeDateAdapter 
   format(date: Date, displayFormat): string 
      if (displayFormat === 'input') 
        let day: string = date.getDate().toString();
        day = +day < 10 ? '0' + day : day;
        let month: string = (date.getMonth() + 1).toString();
        month = +month < 10 ? '0' + month : month;
        let year = date.getFullYear();
        return `$day-$month-$year`;
      
      return date.toDateString();
   

export const APP_DATE_FORMATS: MatDateFormats = 
  parse: 
    dateInput:  month: 'short', year: 'numeric', day: 'numeric' ,
  ,
  display: 
    dateInput: 'input',
    monthYearLabel:  year: 'numeric', month: 'numeric' ,
    dateA11yLabel:  year: 'numeric', month: 'long', day: 'numeric',
    monthYearA11yLabel:  year: 'numeric', month: 'long' ,
  
;

但是当我使用 DD/MM/YYYY 格式手动输入日期时，我收到无效日期错误 例如：24/08/2019

【参考方案1】：

这里是另一个版本的 AppDateAdapter：

export class AppDateAdapter extends NativeDateAdapter 

    parse(value: any): Date | null 
      if ((typeof value === 'string') && (value.indexOf('/') > -1)) 
        const str = value.split('/');
        const year = Number(str[2]);
        const month = Number(str[1]) - 1;
        const date = Number(str[0]);
        return new Date(year, month, date);
      
      const timestamp = typeof value === 'number' ? value : Date.parse(value);
      return isNaN(timestamp) ? null : new Date(timestamp);
    

   format(date: Date, displayFormat: string): string 
      if (displayFormat == "input") 
        let day = date.getDate();
        let month = date.getMonth() + 1;
        let year = date.getFullYear();
        return this._to2digit(day) + '/' + this._to2digit(month) + '/' + year;
       else if (displayFormat == "inputMonth") 
        let month = date.getMonth() + 1;
        let year = date.getFullYear();
        return  this._to2digit(month) + '/' + year;
       else 
          return date.toDateString();
      
   

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


export const APP_DATE_FORMATS =

   parse: 
       dateInput: month: 'short', year: 'numeric', day: 'numeric'
   ,
   display: 
       dateInput: 'input',
       monthYearLabel: 'inputMonth',
       dateA11yLabel: year: 'numeric', month: 'long', day: 'numeric',
       monthYearA11yLabel: year: 'numeric', month: 'long',
   

【讨论】：

这对我有用，但我应该在每个模块中添加提供者：[ provide: DateAdapter, useClass: AppDateAdapter, provide: MAT_DATE_FORMATS, useValue: APP_DATE_FORMATS, ]，不仅在根模块中

【参考方案2】：

import * as moment from 'moment'; 

   const momentDateDebut = new Date(this.dateDebut)
   const formattedDateDebut = moment(momentDateDebut).format("DD/MM/YYYY");

【讨论】：

你怎么知道他是否在使用时刻？？

我没有任何问题可以使用时刻，但我们的用户以这种格式“DD/MM/YYYY”写入日期，默认验证器采用这种格式“MM/DD/YYYY”