CODEWITHSUNDEEP
angulartypescriptmat-datepicker
Code Debug
Code Debug

Reputation: 3

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.

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.

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

Upvotes: -1

Views: 9463

Answers (2)

deliberateSnafu
deliberateSnafu

Reputation: 33

For scenario 2, you can add the closed event to the <mat-date-range-picker> tag and then check if there is an end date selected. If not, set it to whatever date you need.

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" />
    <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 File:

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

Upvotes: 0

Joosep Parts
Joosep Parts

Reputation: 6235

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

Upvotes: 3

Related Questions