How to get dates value of ngx-daterangepicker-material and use them in onSubmit()?

Question

I want to filter a table using two values of date (Range)
Could you help me how to get startDate and endDate in typescript inside onSubmit() function? Here it is my code:

HTML CODE:

<form [formGroup]="filtreForm" (ngSubmit)="onSubmit()">
    <div class="row">
      <div class="col s6">
        <input type="text"
               ngxDaterangepickerMd
               [(ngModel)]="selected"
               [showCustomRangeLabel]="true"
               [alwaysShowCalendars]="alwaysShowCalendars"
               [ranges]="ranges"
               [showClearButton]="true"
               [showCancel]="true"
               [linkedCalendars]="true"
               [isTooltipDate] = "isTooltipDate"
               [isInvalidDate] = "isInvalidDate"
               [locale]="{applyLabel: 'Done'}"
               (rangeClicked)="rangeClicked($event)"
               (datesUpdated)="datesUpdated($event)"
               [keepCalendarOpeningWithRange]="keepCalendarOpeningWithRange"
               [showRangeLabelOnInput]="showRangeLabelOnInput"
               class="form-control"
               placeholder="Select please..."/>
      </div>
    </div>
    <!--End -DatePicker-->
    <div style="min-width: max-content; max-width: max-content;">
      <button type="submit" mat-mini-fab color="primary"><i class="fa fa-search"></i></button>
    </div>
  </div>
</form>

Typescript CODE:

export class CustomRangesComponent implements OnInit {
selected: any;
alwaysShowCalendars: boolean;
ranges: any = {
  'Today': [moment(), moment()],
  'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
  'Last 7 Days': [moment().subtract(6, 'days'), moment()],
  'Last 30 Days': [moment().subtract(29, 'days'), moment()],
  'This Month': [moment().startOf('month'), moment().endOf('month')],
  'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
}
invalidDates: moment.Moment[] = [moment().add(2, 'days'), moment().add(3, 'days'), moment().add(5, 'days')];

isInvalidDate = (m: moment.Moment) =>  {
  return this.invalidDates.some(d => d.isSame(m, 'day') )
}

constructor() {
  this.alwaysShowCalendars = true;
}
 onSubmit() {
   
    });
} 

This the tutorial i followed https://fetrarij.github.io/ngx-daterangepicker-material/custom-ranges

Answer 1

I'm not clear about your requirement but there are two function from which you can get the range. first is rangeClicked($event) it gives the range (startdate and EndDate ) whenever you select a range. the other one is datesUpdated($event) it will give the range when you click on the "Done" button.