Material日期范围选择器：失焦时自动设置结束日期

可以通过监听日期范围选择器的closed事件来实现需求，当选择器面板关闭时，检查开始日期已选择但结束日期为空的情况，自动将结束日期设置为开始日期的值。

响应式表单实现方式 #

模板代码 #

<mat-form-field appearance="fill">
  <mat-label>选择日期范围</mat-label>
  <mat-date-range-input [formGroup]="range" [rangePicker]="dateRangePicker">
    <input matStartDate formControlName="start" placeholder="开始日期">
    <input matEndDate formControlName="end" placeholder="结束日期">
  </mat-date-range-input>
  <mat-datepicker-toggle matIconSuffix [for]="dateRangePicker"></mat-datepicker-toggle>
  <mat-date-range-picker #dateRangePicker (closed)="onPickerClosed()"></mat-date-range-picker>
</mat-form-field>

组件类代码 #

import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'date-range-auto-fill-example',
  templateUrl: './date-range-auto-fill-example.component.html',
})
export class DateRangeAutoFillExampleComponent {
  // 定义日期范围表单组
  range = new FormGroup({
    start: new FormControl<Date | null>(null),
    end: new FormControl<Date | null>(null),
  });

  // 选择器关闭时触发的回调
  onPickerClosed() {
    const startDate = this.range.get('start')?.value;
    const endDate = this.range.get('end')?.value;

    // 当开始日期存在且结束日期为空时，自动赋值
    if (startDate && !endDate) {
      this.range.get('end')?.setValue(startDate);
    }
  }
}

模板驱动表单实现方式 #

模板代码 #

<mat-form-field appearance="fill">
  <mat-label>选择日期范围</mat-label>
  <mat-date-range-input [rangePicker]="dateRangePicker">
    <input matStartDate [(ngModel)]="startDate" placeholder="开始日期">
    <input matEndDate [(ngModel)]="endDate" placeholder="结束日期">
  </mat-date-range-input>
  <mat-datepicker-toggle matIconSuffix [for]="dateRangePicker"></mat-datepicker-toggle>
  <mat-date-range-picker #dateRangePicker (closed)="onPickerClosed()"></mat-date-range-picker>
</mat-form-field>

组件类代码 #

import { Component } from '@angular/core';

@Component({
  selector: 'date-range-auto-fill-template-example',
  templateUrl: './date-range-auto-fill-template-example.component.html',
})
export class DateRangeAutoFillTemplateExampleComponent {
  startDate: Date | null = null;
  endDate: Date | null = null;

  onPickerClosed() {
    if (this.startDate && !this.endDate) {
      // 复制开始日期对象，避免引用同一实例导致的意外问题
      this.endDate = new Date(this.startDate);
    }
  }
}

说明 #

• closed事件是Angular Material日期范围选择器内置的事件，当选择器面板因点击外部区域、关闭按钮或完成日期选择而关闭时都会触发。
• 两种实现方式核心逻辑一致：在选择器关闭时校验日期状态，自动补全结束日期。

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