How to reset primeng datepick calender - angular7

Question

I am trying to reset primeng datepick calender but not working.I am working in angular 8.I have created custom datepicker component using primeng.I have given my code below.How to reset that?Anyone can have idea?please help to find the solution.
app.component.html:
<p-calendar dateformat="mm/dd/yyyy" [numberofmonths]="4" selectionmode="range" formControlName="datePick"></p-calendar>
<button (click)="resetdate()">Reset Date</button>
app.component.ts:
#ViewChild('p-calendar') calendar: any;
resetdate(){
this.calendar.value = null;
}

Answer 1

You are using reactive forms, in the reactive form it will set with form control setValue method.
Update: You can provide model value as an array.
component.html
<hello name="{{ name }}"></hello>
<div [formGroup]="myGroup">
<p>
Date Reset
</p>
<p-calendar formControlName="date" selectionMode="range" [readonlyInput]="true"></p-calendar>
<button (click)="reset()">Reset</button>
<button (click)="setCustomDateRange()">Set Custom Date Range</button>
</div>
component.ts
import { Component } from '#angular/core';
import { FormControl , FormGroup} from '#angular/forms';
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
name = 'Angular';
yearRange = '2000:2020';
myGroup: any;
rangeDates: Date[];
constructor(){
this.myGroup = new FormGroup({
date: new FormControl('')
});
}
setCustomDateRange(){
var date = new Date();
date.setDate(date.getDate() + 10);
this.myGroup.get('date').setValue([new Date(), date]);
}
reset(){
console.log(this.myGroup.get('date').value)
this.myGroup.get('date').setValue(null);
}
}
check working code

Answer 2

Use [(ngModel)] as below:
<p-calendar [(ngModel)]="value"></p-calendar>
and in ts use:
value: Date;
resetdate() {
this.value = null;
}
See working code

Answer 3

If necessary, like for me, you can destroy and recreate the component like this :
<p-calendar *ngIf="showCalendar"></p-calendar>
<button (click)="resetdate()">Reset Date</button>
detectChanges() method apply *ngIf and destroy the component:
constructor(private changeDetectorRef: ChangeDetectorRef) { }
showCalendar = true;
resetdate(): void {
this.showCalendar = false;
this.changeDetectorRef.detectChanges();
this.showCalendar = true;
}

Answer 4

no need to create separate method to reset data binding on module. just use property showClear="true" on tag
<p-calendar [(ngModel)]="value" [showClear]="true"></p-calendar>
for reference check documentation