Angular 7中Material日期选择器实现完整周日历及修改周标签

刚好我之前处理过类似的Angular Material日历配置问题，给你两个问题的具体解决方案：

Angular Material的mat-calendar组件其实默认支持显示其他月份的日期，但有时候可能因为配置或主题问题没生效。你只需要在模板中给日历组件加上[showOtherMonths]="true"这个输入属性就行：

如果是直接使用<mat-calendar>：

<mat-calendar [showOtherMonths]="true"></mat-calendar>

如果是和mat-datepicker绑定使用，需要嵌套到mat-datepicker-content里：

<input matInput [matDatepicker]="myPicker" placeholder="Choose a date">
<mat-datepicker #myPicker>
  <mat-datepicker-content>
    <mat-calendar [showOtherMonths]="true"></mat-calendar>
  </mat-datepicker-content>
</mat-datepicker>

这个属性会让日历显示当前月前后的日期（默认是灰色不可选样式，如果你想允许选择其他月份的日期，可以再加[selectOtherMonths]="true"）。

有两种实现方式，看你需要的灵活度：

方法一：通过区域设置快速实现 #

如果你的应用只需要英文的星期缩写，直接设置MAT_DATE_LOCALE为en-US即可——这个区域的默认星期短标签就是你要的格式。在根模块（比如AppModule）里添加提供者：

import { MAT_DATE_LOCALE } from '@angular/material/core';

@NgModule({
  // ...其他模块配置
  providers: [
    { provide: MAT_DATE_LOCALE, useValue: 'en-US' }
  ]
})
export class AppModule { }

方法二：自定义星期标签（更灵活） #

如果需要完全自定义标签内容（比如用不同缩写或语言），可以扩展NativeDateAdapter并重写getDayOfWeekNames方法：

首先创建一个自定义适配器文件，比如custom-date-adapter.ts：

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

export class CustomDateAdapter extends NativeDateAdapter {
  // 重写星期名称方法
  getDayOfWeekNames(style: 'long' | 'short' | 'narrow'): string[] {
    // 根据传入的样式返回自定义名称
    switch (style) {
      case 'short':
        return ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
      case 'narrow':
        return ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
      case 'long':
        return ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
      default:
        return super.getDayOfWeekNames(style);
    }
  }
}

然后在根模块里替换默认的日期适配器：

import { DateAdapter, MAT_DATE_LOCALE } from '@angular/material/core';
import { CustomDateAdapter } from './custom-date-adapter';

@NgModule({
  // ...其他配置
  providers: [
    { 
      provide: DateAdapter, 
      useClass: CustomDateAdapter,
      deps: [MAT_DATE_LOCALE] // 可选，依赖区域设置
    }
  ]
})
export class AppModule { }

这样就能完全按照你的需求显示星期标签了。

内容的提问来源于stack exchange，提问作者Shiwangi Gaur