Show Today in a mat-datepicker while keeping the date value

1.4k views Asked by At

I am using Angular 12 and Angular Material Datepicker, and I want to be able to show strings like "Today" or "Current" when the selected date meets a condition. However I do not want my form to contain string values, i only want to mask the date value as a string.

For this I have tried to use masks like ngx-mask, angular2-text-mask or angular-imask, but all seems to have the same problem: they implement the ControlValueAccessor interface, which seems to clash with the Datepicker.

Error: More than one custom value accessor matches form control with unspecified name attribute.

I also tried vanilla mask libraries, like vanilla-text-mask, hoping it does not rely on ControlvalueAccessor. I have created this directive:

@Directive({
  selector: '[currentDate]',
})
export class CurrentDateDirective implements OnInit, OnDestroy {
  @Input() set currentDate(value) {
    this._control = value[0];
    this.applyMask();
  }

  private _control: FormControl;
  maskedInputController;

  constructor(private _el: ElementRef, private _datesHelperService: DateHelperService) {
  }

  private applyMask(): void {
    const value = this._control.value;
    const mask = ['Current']; // Only test that it replaces the date with a word
    this.maskedInputController = textMask.maskInput({
      inputElement: this._el.nativeElement,
      mask,
    });
  }

  ngOnDestroy(): void {
    this.maskedInputController.destroy();
  }
}

And then, in my form:

 <input
        matInput
        [matDatepicker]="startDatePicker"
        [min]="minDate"
        [max]="maxDate"
        formControlName="start"
        [currentDate]="[dateRangeForm.get('start')]"
      />

But this just does nothing. I think the key is using some kind of mask as I do not want the actual value to change. Am I missing something?

0

There are 0 answers