Angular mat-date-range-input custom dateInput

Question

I have created a demo here: https://stackblitz.com/edit/angular-ivy-8bvyfh?file=src/app/app.module.ts

I created mat-date-range-input, which works with MomentDateAdapter. When I select days from different months all fine:

But if I select days from the same month, it's expected, that month will be omitted. So instead of:

I would like to see: "24 - 27 October". How can I achieve it?

GRD · Accepted Answer · 2021-11-16 16:40:02Z

3

Demo in this Stackblitz Link

One work around is you can replace text from input using template reference variable.

  <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)"
    />
  />

and then inside component.ts file you can do like this

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

answered Nov 16, 2021 at 16:40

GRD

2062 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular mat-date-range-input custom dateInput

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related