Angular 5 Material日期选择器能否仅选年月并默认设为当月首日？

当然可以实现这个需求！我来一步步教你怎么配置，让用户只能选择年份和月份，同时自动把选中的年月转换成当月的第一天（比如选2017年7月就得到new Date(2017,6,1)）。

第一步：配置日期选择器的视图模式 #

首先在模板里设置日期选择器的初始视图为年份选择，并监听年份选中事件切换到月份视图，这样用户就不会看到日期选择面板了：

<mat-form-field>
  <input 
    matInput 
    [matDatepicker]="picker" 
    placeholder="选择年月" 
    [(ngModel)]="selectedDate"
  >
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker 
    #picker 
    startView="year" 
    (yearSelected)="openMonthView(picker)" 
    panelClass="month-picker"
  ></mat-datepicker>
</mat-form-field>

然后在组件类里实现openMonthView方法，确保选中年份后自动打开月份选择视图：

import { Component } from '@angular/core';
import { MatDatepicker } from '@angular/material/datepicker';

@Component({
  selector: 'app-date-picker-example',
  templateUrl: './date-picker-example.component.html',
  styleUrls: ['./date-picker-example.component.css']
})
export class DatePickerExampleComponent {
  selectedDate: Date;

  openMonthView(picker: MatDatepicker<Date>) {
    picker.open();
  }
}

第二步：自定义日期解析与显示格式 #

接下来要让组件把选中的年月自动转为当月第一天，同时只显示年月信息。我们需要自定义DateAdapter和MAT_DATE_FORMATS：

首先在你的模块文件里（比如DatePickerModule）添加以下代码：

import { NgModule } from '@angular/core';
import { MatDatepickerModule, MatInputModule, MatNativeDateModule } from '@angular/material';
import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';
import { NativeDateAdapter } from '@angular/material/core';

// 自定义日期显示格式，只展示年月
export const MY_DATE_FORMATS = {
  parse: {
    dateInput: { month: 'short', year: 'numeric', day: 'numeric' },
  },
  display: {
    dateInput: { month: 'short', year: 'numeric' }, // 示例显示：Jul 2017
    monthYearLabel: { year: 'numeric', month: 'short' },
    dateA11yLabel: { year: 'numeric', month: 'long', day: 'numeric' },
    monthYearA11yLabel: { year: 'numeric', month: 'long' },
  }
};

// 自定义适配器，将选中的年月转为当月第一天
export class CustomDateAdapter extends NativeDateAdapter {
  parse(value: any): Date | null {
    // 处理字符串格式的输入（比如用户手动输入的情况）
    if (typeof value === 'string' && value.indexOf('/') > -1) {
      const [month, year] = value.split('/');
      return new Date(+year, +month - 1, 1); // 月份是0基的，所以要减1
    }
    // 处理日期选择器返回的日期对象
    const date = super.parse(value);
    if (date) {
      return new Date(date.getFullYear(), date.getMonth(), 1);
    }
    return null;
  }
}

@NgModule({
  imports: [MatDatepickerModule, MatInputModule, MatNativeDateModule],
  providers: [
    { provide: DateAdapter, useClass: CustomDateAdapter },
    { provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMATS },
    // 如果需要中文 locale，可以添加下面这行
    // { provide: MAT_DATE_LOCALE, useValue: 'zh-CN' }
  ]
})
export class DatePickerModule { }

第三步：隐藏日期选择面板（可选但推荐） #

为了彻底避免用户看到日期选择界面，我们可以添加CSS来隐藏日期面板的内容：

/* 在组件的CSS文件里添加 */
.month-picker .mat-calendar-content {
  display: none;
}

效果验证 #

现在你测试一下：

1. 点击日期选择器，首先看到年份列表
2. 选中年份后自动切换到月份列表
3. 选中月份后，输入框显示Jul 2017（或你设置的格式）
4. 组件里的selectedDate会自动变成new Date(2017,6,1)（即2017年7月1日）

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