How to reset inputFieldValue of PrimeNG calendar

Question

I am using PrimeNG p-calendar with selectionMode multiple.

When user selects more than 4 dates, the text in the input is too long and becomes hidden.

I want to set the input value so that if more than 4 dates were selected, it will show the first 4 dates and a character like "(+)" or "..." etc.

I tried to set the input value in the onselect event but it doesn't work:

@ViewChild('multiDate', undefined) private multiDate:any;

public onDateSelect(selectedDate:any){
     this.multiDate.inputfieldViewChild.nativeElement.value += "(+)";
     this.multiDate.inputfieldValue += "(+)";
}

Any Ideas?

thanks a lot!

Answer 1

One way to do it is to set text-overflow: ellipsis; to PrimeNG p-inputtext class:

:host ::ng-deep {
  .p-inputtext {
    text-overflow: ellipsis;
  }
}

See StackBlitz