如果从 Angular 的 mat-datepicker 功能的日历中选择开始日期，如何动态设置月结束日期？

Question

例如。如果从日历中选择的开始日期为“15/06/2000”，并且如果未从日历中选择结束日期，则结束日期将自动设置为“30/06/2000”。结束日期也可以根据选择从日历中选择。

• Datepicker 应该适用于以下两种情况：

场景一： 根据选择从日历中选择开始日期和结束日期。

场景2： 选择了开始日期，但没有从日历中选择结束日期，则结束日期应自动设置为月结束日期。

代码应使用从单个输入字段中选取开始日期和结束日期的功能。

• 下面的 Angular 代码片段仅适用于选择日期范围 :

    <mat-form-field>
        <mat-label>Date Range</mat-label>
        <mat-date-range-input [rangePicker]="picker">
            <input matStartDate matInput placeholder="Start date" />
            <input matEndDate matInput placeholder="End date" />
      </mat-date-range-input>
            <mat-datepicker-toggle matSuffix [for]="picker"></mat- 
             datepicker-toggle>
            <mat-date-range-picker #picker></mat-date-range-picker>
    </mat-form-field>

Answer 1

我们可以使用

(dateChange)="onStartChange($event)"

选择器中的

startDate

来发出所选值，从而更新参数

endDate

的值，这是

endDate

选择器

[value]="endDate"

的输入值。

@Component({
  selector: 'datepicker-overview-example',
  templateUrl: 'datepicker-overview-example.html',
})
export class DatepickerOverviewExample {
  endDate: any;

  onStartChange(event: any) {
    console.log('change ', event.value);
    if (this.endDate) return;
    this.endDate = moment(event.value).endOf('month').toDate();
  }
}

<mat-form-field appearance="fill">
  <mat-label>Choose a start date</mat-label>
  <input matInput [matDatepicker]="picker" (dateChange)="onStartChange($event)">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

<br>
<br>

<mat-form-field appearance="fill">
<mat-label>Choose a end date</mat-label>
<input matInput [matDatepicker]="picker2" [value]="endDate">
<mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
<mat-datepicker #picker2></mat-datepicker>
</mat-form-field>

工作示例： 工作示例：https://stackblitz.com/edit/angular-wut7th-mfiyrd?file=src%2Fapp%2Fdatepicker-overview-example.html

或使用日期范围选择器

<mat-form-field appearance="fill">
  <mat-label>Enter a date range</mat-label>
  <mat-date-range-input [rangePicker]="picker">
    <input matStartDate placeholder="Start date" (dateChange)="onStartChange($event)">
    <input matEndDate placeholder="End date"  [value]="endDate">
  </mat-date-range-input>
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-date-range-picker #picker></mat-date-range-picker>
</mat-form-field>

工作示例：https://stackblitz.com/edit/angular-wut7th-qchi5h?file=src%2Fapp%2Fdatepicker-overview-example.html

Answer 2

对于场景 2，您可以将关闭事件添加到

<mat-date-range-picker>

标签，然后检查是否选择了结束日期。如果没有，请将其设置为您需要的任何日期。

示例

HTML：

<mat-form-field appearance="fill">
  <mat-label>Enter a date range</mat-label>
  <mat-date-range-input [rangePicker]="picker">
    <input matStartDate placeholder="Start date" />
    <input matEndDate placeholder="End date"  [value]="endDate" />
  </mat-date-range-input>
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-date-range-picker #picker (closed)="pickerClosed()"></mat-date-range-picker>
</mat-form-field>

TS 文件：

pickerClosed(): void {
  if (!this.endDate) {
    this.endDate = moment(event.value).endOf('month').toDate();
  }
}