Question

我的api后端需要一个日期格式为：dd / MM / YYYY。我在dd / MM / YYYY中更改输入格式datepicker。

示例：05/01/1992（输入）在控制台中提供Sun Jan 05 1992 00:00:00 GMT + 0100（CET）{}

我的customInputFormatDatepicker

import { NativeDateAdapter } from '@angular/material';

export const APP_DATE_FORMATS = {
    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' },
    }
};


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: Object): string {
       if (displayFormat === 'input') {
           const day = date.getDate();
           const month = date.getMonth() + 1;
           const year = date.getFullYear();
           return this._to2digit(day) + '/' + this._to2digit(month) + '/' + year;
       } else {
           return date.toDateString();
       }
   }

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

Answer 1

看起来您的格式化函数的else语句始终在运行。不确定displayFormat是否会=== 'input'，对我而言不是。您可以在format方法中执行的操作是使用moment.js传递自己的格式，如下所示：

    const formatString =  '<your-format>';
     return moment(date).format(formatString);

您将提供程序添加到ngModule

providers: [
    { provide: DateAdapter, useClass: DateFormat },
    { provide: MAT_DATE_FORMATS, useValue: MOMENT_DATE_FORMATS }

  ],

这对日期格式也很有用。

const APP_DATE_FORMATS = {
 parse: {
dateInput: 'd/MM/yyyy'
  },
 display: {
   dateInput: 'dd/MM/YYYY',
monthYearLabel: 'MMMM Y',
dateA11yLabel: 'LL',
monthYearA11yLabel: 'MMMM Y'
  }
};

如何更改输出角度材料datepicker日期格式？

1 个答案: