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>

日历中的多项选择不起作用 - primeNG

1 个答案: