Angular Material 2-更改日期选择器日期格式（按钮上）

Question

我已成功将我的重要日期选择器的格式从MM / DD / YY更改为DD / MM / YY。

我通过使用此语法扩展本机日期适配器来做到这一点

export class AppDateAdapter extends NativeDateAdapter {

    getFirstDayOfWeek(): number {
        return 1;
    }

    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") {
            let day = date.getDate();
            let month = date.getMonth() + 1;
            let year = date.getFullYear();
            return this._to2digit(day) + "/" + 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: { month: "short", year: "numeric", day: "numeric" },
        dateA11yLabel: { year: "numeric", month: "long", day: "numeric" },
        monthYearA11yLabel: { year: "numeric", month: "long" }
    }
}

app.module.ts：

    // material datepicker
    {
        provide: MAT_DATE_LOCALE, useValue: "nl-be"
    },
    {
        provide: DateAdapter, useClass: AppDateAdapter
    },
    {
        provide: MAT_DATE_FORMATS, useValue: APP_DATE_FORMATS
    }

但是，我还更改了按钮的内容（以更改月份）。 看起来像这样：

无论如何，我可以将tis按钮更改为仅显示“ Nov. 2017”吗？

Answer 1

对于此标签，使用monthYearLabel格式。 您正在处理displayFormat'输入'。 其他人只返回date.toDateString() 。

我这样做是为了处理这个标签。

export const APP_DATE_FORMATS = {
  parse: {
    dateInput: {month: 'short', year: 'numeric', day: 'numeric'},
  },
  display: {
    dateInput: 'input',
    monthYearLabel: {year: 'numeric', month: 'short', order: ['month', ' ', 'year']},
    dateA11yLabel: {year: 'numeric', month: 'long', day: 'numeric'},
    monthYearA11yLabel: {year: 'numeric', month: 'long'},
  }
};

const APP_DATE_MONTH_FORMAT = [{
  short: 'Jan',
  long: 'Januar'
}, {
  short: 'Feb',
  long: 'Februar'
}, {
  short: 'Mär',
  long: 'März'
}, {
  short: 'Apr',
  long: 'April'
}, {
  short: 'Mai',
  long: 'Mai'
}, {
  short: 'Jun',
  long: 'Juni'
}, {
  short: 'Jul',
  long: 'July'
}, {
  short: 'Aug',
  long: 'August'
}, {
  short: 'Sep',
  long: 'September'
}, {
  short: 'Okt',
  long: 'Oktober'
}, {
  short: 'Nov',
  long: 'November'
}, {
  short: 'Dez',
  long: 'Dezember'
}];

class DateTargets {

  day?: string | number;
  month?: string | number;
  year?: number;

  build(order?: Array<string>): string {

    const targets = [];

    if (order) {

      order.forEach((target) => {
        targets.push(this[target] ? this[target] : target);
      });

      return targets.join('');

    } else {

      if (this.day) targets.push(this.day);
      if (this.month) targets.push(this.month);
      if (this.year) targets.push(this.year);

      return targets.join('.');

    }

  }

}

export class AppDateAdapter extends NativeDateAdapter {

  format(date: Date, displayFormat: Object): string {

    if (displayFormat === 'input') {

      const day = date.getDate();
      const month = date.getMonth() + 1;
      const year = date.getFullYear();

      return `${day.pad()}.${month.pad()}.${year}`;

    } else {

      const targets = new DateTargets();

      if (displayFormat['day'] === 'numeric') {
        targets.day = date.getDate();
      }

      if (displayFormat['month'] === 'numeric') {
        targets.month = date.getMonth() + 1;
      } else if (displayFormat['month'] === 'short') {
        targets.month = APP_DATE_MONTH_FORMAT[date.getMonth()].short;
      } else if (displayFormat['month'] === 'long') {
        targets.month = APP_DATE_MONTH_FORMAT[date.getMonth()].long;
      }

      if (displayFormat['year'] === 'numeric') {
        targets.year = date.getFullYear();
      }

      return targets.build(displayFormat['order']);

    }

  }

}