-1

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>
Code Debug
  • 3
  • 1
  • 4
  • Not enough information. What have you tried so far? Is the component date range picker or two seperate date pickers? What is "30/06/2000" you mean it should always pick the last day of the month? – Joosep Parts Apr 04 '22 at 02:27
  • Hi, 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. For eg. if start date picked from calendar is "12/06/2000" then automatically the end date should be set to "30/06/2000" if not selected. – Code Debug Apr 04 '22 at 02:37

2 Answers2

3

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

Joosep Parts
  • 5,372
  • 2
  • 8
  • 33
0

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();
  }
}
deliberateSnafu
  • 33
  • 7