How to reset primeng datepick calender

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