how to get date value of ngx-daterangepicker-material?

Question

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!

HTML code

<form [formGroup]="filtreForm" (ngSubmit)="onSubmit()">
  <div style=" display: flex; flex-wrap: wrap; justify-content: center;">
<!--    <div style="display: flex; flex-wrap: wrap; justify-content: center;">-->
<!--      <div style=" width: 140px; display: flex; padding-left: 10px; padding-right: 10px;">-->


<!--        <mat-form-field>-->
<!--          <input matInput [matDatepicker]="picker" formControlName="dateDu" style=" color: #333333;">-->
<!--          <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>-->
<!--          <mat-datepicker touchUi #picker disabled="false"></mat-datepicker>-->
<!--        </mat-form-field>-->
<!--      </div>-->
<!--      <div style=" width: 140px; display: flex; padding-left: 10px; padding-right: 10px;">-->
<!--        <mat-form-field>-->
<!--          <input matInput [matDatepicker]="picker1" formControlName="dateAu" style=" color: #333333;">-->
<!--          <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>-->
<!--          <mat-datepicker touchUi #picker1 disabled="false"></mat-datepicker>-->
<!--        </mat-form-field>-->
<!--      </div>-->
<!--    </div>-->
    <!-- Start-DatePicker-->
    <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>

Type script File:

  //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) =>  {
    return this.invalidDates.some(d => d.isSame(m, 'day') );
  }
  isTooltipDate = (m: dayjs.Dayjs) =>  {
    const tooltip = this.tooltips.find(tt => 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) => {
      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 => {
      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<any>(environment.BASE_URL + 'Inventaire/findAllByPeriode/' + du + '/' + au + ' 23:59:59',
      {}
    ).subscribe(resp => {
      if (resp.status === "success") {
        this.list = resp.data;
      }
      this.loading = false;
    });

  }

I am using this tutorial in the github https://github.com/fetrarij/ngx-daterangepicker-material/tree/master/demo/src/app/custom-ranges

Answer 1

也许这样你就可以取值 (choosedDate)="choosedDate($event)"