angular - Angular mat-date-range-input 自定义 dateInput

Question

我在这里创建了一个演示：https ://stackblitz.com/edit/angular-ivy-8bvyfh?file=src/app/app.module.ts

我创建了mat-date-range-input，它与MomentDateAdapter. 当我选择不同月份的日子时，一切都很好：

但是，如果我从同一个月中选择日期，则预计该月将被省略。所以而不是：

我想看：“10 月 24 日至 27 日”。我怎样才能实现它？

Answer 1

此Stackblitz 链接中的演示

一种解决方法是您可以使用模板引用变量替换输入中的文本。

  <mat-date-range-input [rangePicker]="picker">
   <input
     #dateRangeStart
      matStartDate
      placeholder="Start date"
      (blur)="dateRangeChange(dateRangeStart, dateRangeEnd)"
      (dateChange)="dateRangeChange(dateRangeStart, dateRangeEnd)"
    />
    <input
      matEndDate
      placeholder="End date"
      #dateRangeEnd
      (dateChange)="dateRangeChange(dateRangeStart, dateRangeEnd)"
    />
  />

然后在 component.ts 文件中你可以这样做

  dateRangeChange(s, e) {
    s.value = s.value.split(' ')[0];
  }