PrimeNG Calendar (p-calendar) won't reset manual input

Question

I am using p-calendar in my Angular2 application and I'm experiencing some strange behaviour. If I insert the date value with the help of the calendar widget, it will successfully reset after I'm caling the .reset() function on my form group. The problem I'm getting is that when user enters the date by hand into the calendar input field, it won't get cleared after calling .reset(). If I try to fetch the value of the field it will return the correct default value (null), but input field is still showing the previously inserted value, that was already submitted.

I am using PrimeNG 2.0.6.

Is there anything I can do to reset the value stuck in input field?

Answer 1

Well after some hours of research and tries in many ways I just found my solution and I hope it will help others. The solution is simple and works for me:

Html

<button class="button button-3 button-3a clear" (click)="clearfilter();">
 <i class="fa fa-close"></i> {{'Clear Filters' | translate}}
</button>
<p-table #dt [columns]="cols" 
             [value]="profitsConfig" 
             [rows]="10" 
             [rowsPerPageOptions]="[5,10,20,50,100]"
             [paginator]="true" 
             [resizableColumns]="true" 
             columnResizeMode="expand" 
             [scrollable]="true"
             [(selection)]="mySelection" 
             selectionMode="multiple" 
             exportFilename="ProfitsConfig"
             [showCurrentPageReport]="true" 
             currentPageReportTemplate="Total: {{dt.totalRecords}}">
    ...
<p-calendar #createCalendar appendTo="body" 
            [(ngModel)]="rangeDatesCreate" 
            *ngSwitchCase="'createdate'"
            selectionMode="range" dateFormat="dd/mm/yy" 
            placeholder="dd/mm/yy - dd/mm/yy"
            (onSelect)="dt.filter($event,col.field, 'dateRangeFilter')" 
            [monthNavigator]="true" [yearNavigator]="true"
            yearRange="1990:2050" [readonlyInput]="true">
</p-calendar>

And when I call the function to clear all my filters:

TypeScript

rangeDatesCreate: Date[];

constructor(){}

clearfilter() {
  this.rangeDatesCreate = null;
  ....
}

So I just set to null the value that is bound with [(ngModel)]. I hope this helps!