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

Posted

技术标签:

【中文标题】角反应形式材料日期选择器手动输入格式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”

以上是关于角反应形式材料日期选择器手动输入格式DD/MM/YYYY的主要内容,如果未能解决你的问题,请参考以下文章

角度材料日期选择器中的日期不正确

角材料日期选择器箭头颜色

如何从角材料datepicker更改日期?

JXDatePicker 使用 SimpleDateFormat 将 dd.MM.yy 格式化为当前世纪的 dd.MM.yyyy

带有 [ngmodel] 的 Angular 材料 2 日期选择器

DatePipe 转换显示错误的日期格式