カレンダーの複数の選択肢が機能しない - primeNG

Question

primeNG - 範囲と複数のオプションでカレンダーを使用したいが、機能しません。私はカレンダーから1つの日付しか選択できません。

     <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>