CODEWITHSUNDEEP
angular7primengangular8
Kaviya B
Kaviya B

Reputation: 55

How to set values for date range in primeng

I am trying to set value during initializing form using 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 set date range value that?Anyone can have idea?please help to find the solution.

app.component.html:

<p-calendar  
    [(ngModel)]="datesRangeFilter"
    selectionMode="range" view="month" dateFormat="mm/yy" [readonlyInput]="true"
    [showIcon]="true">
</p-calendar>

app.component.ts:

datesRangeFilter:Date;

 ngOnInit(){

  let yesterday = ( d => new Date(d.setDate(d.getDate()-1)) )(new Date);

  this.datesRangeFilter=yesterday +'-'+new Date;

 }

Upvotes: 0

Views: 9265

Answers (1)

Abhinav Kumar
Abhinav Kumar

Reputation: 3036

You can assign two different dates as an array, and it will be bind to the model.

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][1]

Upvotes: 0

Related Questions