如何重置 primeng datepicker 日历

Question

我正在尝试重置 primeng datepick 日历但不是 working.I 我在 angular 工作 8.I 已使用 primeng.I 创建自定义日期选择器组件已提供我的代码 below.How 重置那个？任何人都可以知道吗？请帮助找到解决方案。

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

使用[(ngModel)]如下：

<p-calendar [(ngModel)]="value"></p-calendar>

并在 ts 中使用：

 value: Date;

  resetdate() {
    this.value = null;
  }

See working code

Answer 2

您正在使用反应式表单，在反应式表单中它将使用表单控件的 setValue 方法进行设置。

更新：您可以将模型值作为数组提供。

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);
  }


}

检查working code

如何重置 primeng datepicker 日历

How to reset primeng datepick calender

primeng

angular7

angular8