如何实现Angular mat-date-range-input同月份选中日期省略重复月份显示

你可以通过 mat-date-range-input 自带的 displayWith 输入属性自定义显示逻辑，无需修改全局的 MomentDateAdapter 配置：

步骤1：在组件中定义格式化函数 #

import * as moment from 'moment';
import { Component } from '@angular/core';

@Component({
  // 组件原有配置保持不变
})
export class YourComponent {
  // 自定义日期范围显示逻辑
  formatDateRange = (start: moment.Moment | null, end: moment.Moment | null): string => {
    if (!start || !end) return '';
    // 判断起止日期是否同年同月
    if (start.isSame(end, 'month')) {
      return `${start.date()} - ${end.date()} ${start.format('MMMM')}`;
    }
    // 跨月份场景沿用原有显示逻辑
    return `${start.format('D MMMM')} - ${end.format('D MMMM')}`;
  };
}

步骤2：在模板中绑定格式化函数 #

<mat-date-range-input 
  [rangePicker]="rangePicker"
  [displayWith]="formatDateRange"
>
  <input matStartDate placeholder="开始日期">
  <input matEndDate placeholder="结束日期">
</mat-date-range-input>
<mat-date-range-picker #rangePicker></mat-date-range-picker>

如果需要全局所有日期范围选择器都生效，你可以自定义 MAT_DATE_FORMATS 注入 token，在全局配置中覆盖范围日期的显示规则即可。

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