I need some help to uderstand why i'm struggling to do this :
I got a primeNG datepicker that has an input inside. I would like to apply the ngx-mask directive to that input, but i can't find a way that works...
ngx-mask: ()
Can someone tell me how you think we can solve that ? I tried with a javascript inputmask lib () and it works when i apply the directive directly on the datepicker primeng so i think it's clearly possible !
Just want to try if i can do the same with ngx-mask
Here is the wrapper directive i tried :
import { AfterViewInit, Directive, ElementRef, Inject, Input, InputSignal, Optional } from '@angular/core';
import { NgxMaskDirective, provideNgxMask } from 'ngx-mask';
import { DatePicker } from 'primeng/datepicker';
@Directive({
selector: 'dateMask',
providers: [provideNgxMask(), NgxMaskDirective]
})
export class DatePickerMaskDirective implements AfterViewInit {
private ngxMaskDirective: NgxMaskDirective;
constructor(
private datePicker: ElementRef,
) {}
ngAfterViewInit() {
const input = this.datePicker.nativeElement.querySelector('input');
if (input) {
this.ngxMaskDirective = new NgxMaskDirective();
this.ngxMaskDirective.writeValue(input.value);
input.addEventListener('input', (e: Event) => {
this.ngxMaskDirective.onInput(e as any);
});
input.addEventListener('blur', (e: Event) => {
this.ngxMaskDirective.onBlur(e as any);
});
}
}
}
<p-datepicker
// somes others attributes
dateMask
mask="99:99"
apm="true"
>
Thanks in advance,