Struggling to format the date of birth input with dashes manually when entered by the user. The desired output should resemble "08-18-2019," but I'm having difficulty achieving this.
public dateOfBirth: { year: number; month: number; day: number };
html file
<input
ngbDatepicker
dobMask
#d="ngbDatepicker"
#dobF="ngModel"
class="form-control input-underline input-lg"
id="dob"
[(ngModel)]="dateOfBirth"
placeholder="mm-dd-yyyy"
name="dp"
[ngClass]="{
invalid:
(dobF.value === null || isString(dobF.value) || futureDate) && dobF.touched
}"
required
/>
Implemented a directive, but the result displayed as "11---------3."
Directive code snippet:
@Directive({
selector: '[dobMask]'
})
export class DobDirective {
@HostListener('input', ['$event'])
onKeyDown(event: KeyboardEvent) {
const input = event.target as HTMLInputElement;
let trimmed = input.value.replace(/\s+/g, '');
if (trimmed.length > 8) {
trimmed = trimmed.substr(0, 8);
}
let numbers = [];
for (let i = 0; i < trimmed.length; i += 2) {
numbers.push(trimmed.substr(i, 2));
}
input.value = numbers.join('-');
}
}
Current result: Imgur link not provided
Desired outcome: Should display as "08-17-2019."
Any guidance on how to achieve the expected formatting?