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

Question

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

日期选择器应该适用于以下两种情况：

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

场景 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

我们可以使用 startDate 选择器中的 (dateChange)="onStartChange($event)" 来发出选择的值，从而更新参数 endDate 的值，这是 endDate 选择器 [=17= 的输入值].

@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

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

How to dynamically set month end date if start date is picked from the calendar of Angular's mat-datepicker functionality?

typescript2.0

angular

mat-datepicker