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

Eg. If Start date picked from calendar is "15/06/2000" and if no End Date is selected from calendar then End Date gets automatically set to "30/06/2000". End Date can also be picked from calendar as per choice.

Datepicker should work for below two scenarios :

Scenario 1 : Start date and End date selected from calendar as per choice.

Scenario 2 : Start date selected but no End date selected from calendar then automatically the End date should be set to month end date.

The code should use functionality where in the start date and end date is picked from single input field.

The Angular code snippet below works only in selecting the date range :

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

Solution

We can use (dateChange)="onStartChange($event)" from startDate picker to emit chosen value and thus updating value of param endDate which is Input value for endDate picker [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>

Working example: Working example: https://stackblitz.com/edit/angular-wut7th-mfiyrd?file=src%2Fapp%2Fdatepicker-overview-example.html

Or with dateRange picker

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

Working example: https://stackblitz.com/edit/angular-wut7th-qchi5h?file=src%2Fapp%2Fdatepicker-overview-example.html