material date range picker angular

angular material datepicker range get value

// Template

<mat-form-field appearance="standard">
  <mat-label>{{reportField.value.label}}</mat-label>
  <mat-date-range-input [rangePicker]="dateRangePicker">
    <input matStartDate
      placeholder="Start date"
      #dateRangeStart>
    <input matEndDate
      placeholder="End date"
      #dateRangeEnd
      (dateChange)="dateRangeChange(dateRangeStart, dateRangeEnd)">
  </mat-date-range-input>
  <mat-datepicker-toggle matPrefix
    [for]="dateRangePicker">
  </mat-datepicker-toggle>
  <mat-date-range-picker #dateRangePicker></mat-date-range-picker>
</mat-form-field>

Posted by: Guest on March-13-2021

Source

As you are using Angular Reactive forms, you can listen for changes in the dateOne form control value through the valueChanges observable and set the dateTwo form control value. this.form.get('dateOne')?.valueChanges.subscribe(date => { const dateTwo = formatDate(new Date()+ 7, 'MM/dd/yyyy', 'en'); this.form.get('dateTwo')?.setValue(dateTwo); });

Code answers related to "material date range picker angular"

Code answers related to "Javascript"

Javascript Answers by Framework

Browse Popular Code Answers by Language

Answers for "material date range picker angular"

Code answers related to "material date range picker angular"

Code answers related to "Javascript"

Javascript Answers by Framework

Browse Popular Code Answers by Language

Popular Programming Languages

Advertisements

Company

Compilers

Help

Connect with us