Question

我想更改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>

format-picker.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

Answer 1

尝试一下，如果它对您有用，请接受答案：）

import * as moment from 'moment'; 

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

Answer 2

这里是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'},
   }
}

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

2 个答案: