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 リンクのデモ

回避策の 1 つは、テンプレート参照変数を使用して入力からテキストを置き換えることです。

  <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];
  }