The component in Angular material datepicker:
inputEvent(event, type: number): void {...}
changeEvent(event, type: number): void {...}
newDateStart: Date = null;
endDateStart: Date = null;
The template:
<mat-date-range-input [rangePicker]="picker">
<input #fromInput matStartDate placeholder="Start Date"
(dateInput)="inputEvent($event, 0)"
(dateChange)="changeEvent($event, 0)">
<input #toInput matEndDate placeholder="End Date"
(dateInput)="inputEvent($event, 1)"
(dateChange)="changeEvent($event, 1)">
</mat-date-range-input>
And the CustomDateAdapter for datepicker:
export class CustomDateAdapter extends NativeDateAdapter {
parse(value: any): Date | null {
// if ((typeof value === 'string') && (value.indexOf('.') > -1)) {
if (typeof value === 'string') {
let str: string[] = [];
if (value.indexOf('.') > -1) {
str = value.split('.');
} else if (value.indexOf(' ') > -1) {
str = value.split(' ');
} else if (value.indexOf('-') > -1) {
str = value.split('-');
}
const year = Number(str[2]);
const month = Number(str[1]) - 1;
const date = Number(str[0]);
return new Date(year, month, date);
} else if ((typeof value === 'string') && value === '') {
return new Date();
}
const timestamp = typeof value === 'number' ? value : Date.parse(value);
return isNaN(timestamp) ? null : new Date(timestamp);
}
getFirstDayOfWeek(): number {
return 1;
}
}
The date format is 05.03.2022 where 05 – day, 03 – month, 2022 – year.
One may enter:
- “05032022” in this case I need to add “.” into this string to get “05.03.2022” and plase this new string into input in the template
- “05.03.202200” in this case I need to limit the year by 4 number length
How do I insert dots into date and limit the year in angular material date picker?
