title: how to get date value of ngx-daterangepicker-material?
body: <p>I am using ngx-daterangepicker-material to create range date.
  I want to get startdate and enddate value to filter the table once I press submit button!</p>
  <p>HTML code</p>
  <pre><code>&lt;form [formGroup]=&quot;filtreForm&quot; (ngSubmit)=&quot;onSubmit()&quot;&gt;
    &lt;div style=&quot; display: flex; flex-wrap: wrap; justify-content: center;&quot;&gt;
  &lt;!--    &lt;div style=&quot;display: flex; flex-wrap: wrap; justify-content: center;&quot;&gt;--&gt;
  &lt;!--      &lt;div style=&quot; width: 140px; display: flex; padding-left: 10px; padding-right: 10px;&quot;&gt;--&gt;
  
  
  &lt;!--        &lt;mat-form-field&gt;--&gt;
  &lt;!--          &lt;input matInput [matDatepicker]=&quot;picker&quot; formControlName=&quot;dateDu&quot; style=&quot; color: #333333;&quot;&gt;--&gt;
  &lt;!--          &lt;mat-datepicker-toggle matSuffix [for]=&quot;picker&quot;&gt;&lt;/mat-datepicker-toggle&gt;--&gt;
  &lt;!--          &lt;mat-datepicker touchUi #picker disabled=&quot;false&quot;&gt;&lt;/mat-datepicker&gt;--&gt;
  &lt;!--        &lt;/mat-form-field&gt;--&gt;
  &lt;!--      &lt;/div&gt;--&gt;
  &lt;!--      &lt;div style=&quot; width: 140px; display: flex; padding-left: 10px; padding-right: 10px;&quot;&gt;--&gt;
  &lt;!--        &lt;mat-form-field&gt;--&gt;
  &lt;!--          &lt;input matInput [matDatepicker]=&quot;picker1&quot; formControlName=&quot;dateAu&quot; style=&quot; color: #333333;&quot;&gt;--&gt;
  &lt;!--          &lt;mat-datepicker-toggle matSuffix [for]=&quot;picker1&quot;&gt;&lt;/mat-datepicker-toggle&gt;--&gt;
  &lt;!--          &lt;mat-datepicker touchUi #picker1 disabled=&quot;false&quot;&gt;&lt;/mat-datepicker&gt;--&gt;
  &lt;!--        &lt;/mat-form-field&gt;--&gt;
  &lt;!--      &lt;/div&gt;--&gt;
  &lt;!--    &lt;/div&gt;--&gt;
      &lt;!-- Start-DatePicker--&gt;
      &lt;div class=&quot;row&quot;&gt;
        &lt;div class=&quot;col s6&quot;&gt;
          &lt;input type=&quot;text&quot;
                 ngxDaterangepickerMd
                 [(ngModel)]=&quot;selected&quot;
                 [showCustomRangeLabel]=&quot;true&quot;
                 [alwaysShowCalendars]=&quot;alwaysShowCalendars&quot;
                 [ranges]=&quot;ranges&quot;
                 [showClearButton]=&quot;true&quot;
                 [showCancel]=&quot;true&quot;
                 [linkedCalendars]=&quot;true&quot;
                 [isTooltipDate] = &quot;isTooltipDate&quot;
                 [isInvalidDate] = &quot;isInvalidDate&quot;
                 [locale]=&quot;{applyLabel: 'Done'}&quot;
                 (rangeClicked)=&quot;rangeClicked($event)&quot;
                 (datesUpdated)=&quot;datesUpdated($event)&quot;
                 [keepCalendarOpeningWithRange]=&quot;keepCalendarOpeningWithRange&quot;
                 [showRangeLabelOnInput]=&quot;showRangeLabelOnInput&quot;
                 class=&quot;form-control&quot;
                 placeholder=&quot;Select please...&quot;/&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;!--End -DatePicker--&gt;
      &lt;div style=&quot;min-width: max-content; max-width: max-content;&quot;&gt;
        &lt;button type=&quot;submit&quot; mat-mini-fab color=&quot;primary&quot;&gt;&lt;i class=&quot;fa fa-search&quot;&gt;&lt;/i&gt;&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  <p>Type script File:</p>
  <pre><code>  //Datepicker
    selected: any;
    alwaysShowCalendars: boolean;
    showRangeLabelOnInput: boolean;
    keepCalendarOpeningWithRange: boolean;
    maxDate: dayjs.Dayjs;
    minDate: dayjs.Dayjs;
    invalidDates: dayjs.Dayjs[] = [];
    tooltips = [
      {date: dayjs(), text: 'Today is just unselectable'},
      {date:  dayjs().add(2, 'days'), text: 'Yeeeees!!!'}
    ];
    inlineDateTime;
    ranges: any = {
      Today: [dayjs(), dayjs()],
      Yesterday: [dayjs().subtract(1, 'days'), dayjs().subtract(1, 'days')],
      'Last 7 Days': [dayjs().subtract(6, 'days'), dayjs()],
      'Last 30 Days': [dayjs().subtract(29, 'days'), dayjs()],
      'This Month': [dayjs().startOf('month'), dayjs().endOf('month')],
      'Last Month': [
        dayjs()
          .subtract(1, 'month')
          .startOf('month'),
        dayjs()
          .subtract(1, 'month')
          .endOf('month')
      ],
      'Last 3 Month': [
        dayjs()
          .subtract(3, 'month')
          .startOf('month'),
        dayjs()
          .subtract(1, 'month')
          .endOf('month')
      ]
    };
  
    isInvalidDate = (m: dayjs.Dayjs) =&gt;  {
      return this.invalidDates.some(d =&gt; d.isSame(m, 'day') );
    }
    isTooltipDate = (m: dayjs.Dayjs) =&gt;  {
      const tooltip = this.tooltips.find(tt =&gt; tt.date.isSame(m, 'day'));
      if (tooltip) {
        return tooltip.text;
      } else {
        return false;
      }
    }
    constructor(private dialog: MatDialog, private inventaireService: InventaireService, private columnsService: ColumnsService, private formBuilder: FormBuilder, private userServ: UserService, private datepipe: DatePipe, private http: HttpClient) {
     //DatePicker
      this.maxDate = dayjs().add(2,  'weeks');
      this.minDate = dayjs().subtract(3, 'days');
  
      this.alwaysShowCalendars = true;
      this.keepCalendarOpeningWithRange = true;
      this.showRangeLabelOnInput = true;
      this.selected = {
        startDate: dayjs().subtract(1, 'days').set('hours', 0).set('minutes', 0),
        endDate: dayjs().subtract(1, 'days').set('hours', 23).set('minutes', 59)
      };}
  
      //DatePicker
    rangeClicked(range) {
      console.log('[rangeClicked] range is : ', range);
    }
    datesUpdated(range) {
      console.log('[datesUpdated] range is : ', range);
    }
    choosedDateTime(e) {
      this.inlineDateTime = e;
    }
  
    ngOnInit() {
      //this.selected=this.datepipe.transform(this.selected.startDate, 'yyyy-MM-dd HH:mm:ss');
      //this.selected=this.datepipe.transform(this.selected.endDate, 'yyyy-MM-dd HH:mm:ss');
     this.getSelectedColumns();
  
  
      this.userServ.getDroit(this.idTier, 'Inventaire').then((res) =&gt; {
        this.button = res[0];
      });
      //this.initForm();
      this.onSubmit();
    }
  
    initForm() {
      this.filtreForm = this.formBuilder.group({
        dateAu : new FormControl({value: this.dateAu, disabled: true}, Validators.required),
        dateDu: new FormControl({value: this.dateDu, disabled: true}, Validators.required)
      });
    }
  
  
  
  
    getSelectedColumns() {
      let user = sessionStorage.getItem('id');
      this.columnsService.getSelectedColumns(user, 'inventaire').subscribe(res =&gt; {
        if (res.length === 0) {
          this.selectedColumns = this.cols;
        } else {
          this.selectedColumns = res;
        }
      })
    }
  
    onSubmit() {
      let obj = this.filtreForm.value;
      this.loading = true;
      let du = this.datepipe.transform(this.dateAu, 'yyyy-MM-dd HH:mm:ss');
      let au = this.datepipe.transform(this.dateDu, 'yyyy-MM-dd HH:mm:ss');
      this.http.get&lt;any&gt;(environment.BASE_URL + 'Inventaire/findAllByPeriode/' + du + '/' + au + ' 23:59:59',
        {}
      ).subscribe(resp =&gt; {
        if (resp.status === &quot;success&quot;) {
          this.list = resp.data;
        }
        this.loading = false;
      });
  
    }
  </code></pre>
  <p>I am using this tutorial in the github <a href="https://github.com/fetrarij/ngx-daterangepicker-material/tree/master/demo/src/app/custom-ranges" rel="nofollow noreferrer">https://github.com/fetrarij/ngx-daterangepicker-material/tree/master/demo/src/app/custom-ranges</a></p>