CODEWITHSUNDEEP
angularprimeng
Bhrungarajni
Bhrungarajni

Reputation: 2535

How to display one calender at a time in prime ng using angular 2

i need to display one calender at a time and want other calender to be closed, if i click on other calender.

I have used prime ng calender.

HTML:

<div class="col-sm-3">
        <label class="show"> Date</label>
        <p-calendar  [monthNavigator]="true" [yearNavigator]="true" yearRange="1910:2020" showButtonBar="true" dateFormat="mm-dd-yy" placeholder="mm-dd-yyyy"></p-calendar>
      </div>
      <div class="col-sm-3">
        <label>Last Occurance</label>
        <p-calendar  [monthNavigator]="true" [yearNavigator]="true" yearRange="1910:2020" showButtonBar="true" dateFormat="mm-dd-yy" placeholder="mm-dd-yyyy"></p-calendar>
      </div>

Upvotes: 0

Views: 171

Answers (1)

Sravan
Sravan

Reputation: 18647

Take different ngModel for multiple calenders

HTML: 

<div class="col-sm-3">
    <label class="show"> Date</label>
    <p-calendar id="date1" [(ngModel)]="date1" [monthNavigator]="true" [yearNavigator]="true" yearRange="1910:2020" showButtonBar="true" dateFormat="mm-dd-yy" placeholder="mm-dd-yyyy"></p-calendar>
</div>
<div class="col-sm-3">
    <label>Last Occurance</label>
    <p-calendar id="date2" [(ngModel)]="date1" [monthNavigator]="true" [yearNavigator]="true" yearRange="1910:2020" showButtonBar="true" dateFormat="mm-dd-yy" placeholder="mm-dd-yyyy"></p-calendar>
</div>

In ts:

export class CalendarDemo {
        date1: Date;
        date2: Date;
    }

Here is an example

Upvotes: 1

Related Questions