CODEWITHSUNDEEP
angulartypescriptprimeng
Italik
Italik

Reputation: 696

Multiple choice in calendar doesn't work - primeNG

I want to use calendar in primeNG - range and multiple options, but it doesn't work. I can only choose one date from calendar.

<div class="box-body">
    <div class="row">
        <div class="col-md-12">
            <p-calendar maxDateCount="2" placeholder="Choose days" [(ngModel)]="dates" selectionMode="multiple" readonlyInput="true"></p-calendar>
        </div>
        <div class="col-md-12">
            <p-calendar placeholder="Choose range of date" [(ngModel)]="rangeDates" selectionMode="range" readonlyInput="true" ></p-calendar>
       </div>
   </div>
</div>

Component.ts

import { MultiSelectModule, CalendarModule} from 'primeng/primeng';
import { Component } from '@angular/core';

export class CalendarDemo {

dates: Date[];
rangeDates: Date[];

}

Upvotes: 1

Views: 1531

Answers (1)

emp
emp

Reputation: 5065

I have created a working plunker to demonstrate it should work. It is also working on the PrimeNG demo page, so it has probably something to do with external implementation details of your application.

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: 'app/app.template.html'
})

export class AppComponent {
    dates: Date[];
    rangeDates: Date[];
}

app.module.ts

import { NgModule }      from '@angular/core';
import { FormsModule }   from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent }   from './app.component';

// Import PrimeNG modules
import { CalendarModule } from 'primeng';

@NgModule({ 
  imports:      [ BrowserModule, BrowserAnimationsModule, FormsModule, CalendarModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})

export class AppModule { }

app.template.html

<h3>Angular 4.2.6, PrimeNG 4.1.3, Calendar example</h3>

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

<div class="box-body">
    <div class="row">
        <div class="col-md-12">
            <p-calendar maxDateCount="2" placeholder="Choose days" [(ngModel)]="dates" selectionMode="multiple" readonlyInput="true"></p-calendar>
        </div>
        <div class="col-md-12">
            <p-calendar placeholder="Choose range of date" [(ngModel)]="rangeDates" selectionMode="range" readonlyInput="true" ></p-calendar>
       </div>
   </div>
</div>

Upvotes: 2

Related Questions