如何获取ngx-daterangepicker-material的日期范围值并在提交时过滤表格

我看了你的代码，核心问题是提交方法onSubmit()里没有使用日期选择器绑定的selected变量，反而还在引用之前注释掉的mat-datepicker对应的dateAu和dateDu，这俩变量和当前的ngx-daterangepicker-material组件完全没有关联，自然拿不到选中的日期值。

下面是具体的修改方案：

1. 清理冗余代码 #

你之前注释掉的mat-datepicker相关代码以及对应的initForm()方法（现在用的是ngModel绑定selected，不再需要响应式表单的formControl），如果已经不需要了，可以直接删掉，避免代码混淆。

2. 修改onSubmit()方法，正确获取日期范围 #

直接从双向绑定的this.selected对象中提取startDate和endDate，用dayjs自带的format()方法转换成接口需要的格式（不用依赖DatePipe，更贴合组件的技术栈）：

onSubmit() {
  this.loading = true;
  // 从selected中提取日期并格式化为接口要求的格式
  const startDate = this.selected.startDate.format('YYYY-MM-DD HH:mm:ss');
  const endDate = this.selected.endDate.format('YYYY-MM-DD HH:mm:ss');
  
  // 调用接口时直接使用格式化后的日期
  this.http.get<any>(`${environment.BASE_URL}Inventaire/findAllByPeriode/${startDate}/${endDate}`, {} ).subscribe(
    resp => {
      if (resp.status === "success") {
        this.list = resp.data;
      }
      this.loading = false;
    },
    error => {
      // 增加错误处理，防止加载状态一直处于true
      this.loading = false;
      console.error('加载数据失败:', error);
    }
  );
}

3. 可选：优化HTML表单绑定规范 #

在form中使用ngModel时，建议给input加上name属性，避免控制台抛出警告：

<input 
  type="text" 
  ngxDaterangepickerMd 
  [(ngModel)]="selected" 
  name="dateRange" <!-- 新增name属性 -->
  [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..."/>

额外提示 #

• 你已经通过[(ngModel)]="selected"实现了双向绑定，用户选择日期范围后this.selected会自动更新，不需要在datesUpdated方法里手动赋值（该方法可以保留用来调试，比如打印选中的范围）。
• 如果遇到日期格式问题，检查是否导入了dayjs的format扩展（ngx-daterangepicker-material默认已经集成了必要的dayjs功能，一般无需额外配置）。

内容的提问来源于stack exchange，提问作者drn