0

我想使用两个日期值（范围）过滤表
你能帮我如何在 onSubmit() 函数内的打字稿中获取 startDate 和 endDate 吗？这是我的代码：

HTML 代码：

<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>

打字稿代码：

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() {
   
    });
}

这是我遵循的教程https://fetrarij.github.io/ngx-daterangepicker-material/custom-ranges

4

1 回答 1

0

我不清楚您的要求，但有两个函数可以从中获取范围。首先是 rangeClicked($event)，只要您选择一个范围，它就会给出范围（开始日期和结束日期）。另一个是 datesUpdated($event) 当你点击“完成”按钮时它会给出范围。

于 2021-09-11T07:09:42.850 回答