javascript - ngx-mask custom directive on primeng components - Stack Overflow

admin2025-04-17  2

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: ()

  • I tried applying the mask attributes directly on the datepicker, but it seems it works only on an input.
  • I tried with ViewChild and then setAttribute "mask" on the inner input.
  • I tried with a custom wrapper directive that wraps NgxMaskDirective and provideNgxMask but i'm on angular 18 and it seems the attribute mask from ngx-mask is an InputSignal so it can't be modified.

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,

转载请注明原文地址:http://anycun.com/QandA/1744825428a88140.html