0
209
ViewsAngular mat-date-range-input custom dateInput
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?
·
Santiago Trujillo
1 answers
Answer question0
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];
}
·
Santiago Trujillo
Report
Answer question