日曆中的多項選擇不起作用 - primeNG

Question

我想在primeNG中使用日曆 - 範圍和多個選項，但不起作用。我只能從日曆中選擇一個日期。

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

} 

Answer 1

我創建了一個working plunker證明它應該工作。它也在處理PrimeNG demo page，所以它可能與您的應用程序的外部實現細節有關。

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>