Angular PrimeNG表格日历选择模式组件

Angular PrimeNG是一个由谷歌开发和维护的Angular框架的UI组件集合。它使开发人员能够在更短的时间内开发出可扩展和响应式的界面，从而提高生产力。在这篇文章中，我们将看到Angular PrimeNG表格日历选择模式组件。

日历组件用于输入用户的日期和时间。默认情况下，用户只能选择一个日期，但通过将selectionMode属性设置为multiple，可以选择多个日期。在这里，这些值将被存储在一个日期数组中，其长度可以通过maxDateCount属性来控制。第三种选择模式是范围模式，可以选择一个开始和结束日期，它将被存储在一个长度为2的日期数组中。

Angular PrimeNG表格日历选择模式属性：

selectionMode。它指定了日历的选择模式。它可以被设置为 “多个 “和 “范围”。
maxDateCount。当日历处于 “多重 “模式时，该属性用于限制日期数组的长度。

语法:

<p-calendar 
    placeholder="Select the Date"
    selectionMode="..."
    [maxDateCount]="..."
    [(ngModel)]="....">
</p-calendar>

创建Angular应用程序并安装模块：。

第1步：使用以下命令创建一个Angular应用程序。

ng new appname

第2步：创建你的项目文件夹即appname后，使用以下命令移动到它。

cd appname

第3步：最后，在你给定的目录中安装PrimeNG。

npm install primeng --save
npm install primeicons --save

项目结构：在完成上述步骤后，项目结构将看起来像这样。

Angular PrimeNG表格日历选择模式组件

Project Structure

例子1：在这个例子中，我们把selectionMode属性设置为 “multiple”，把maxDateCount属性设置为4。

<h2 style="color: green">GeeksforGeeks</h2>
<h4>Angular PrimeNG Form Calendar 
    Selection Mode Component</h4>
  
<p-calendar 
    placeholder="Select the Date"
    selectionMode="multiple"
    [maxDateCount]="4"
    [(ngModel)]="calendarVal">
</p-calendar>

import { Component } from "@angular/core";
  
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
})
  
export class AppComponent { 
    calendarVal?: Date;
}

import { NgModule } from '@angular/core';
import { BrowserModule } 
    from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule } 
    from '@angular/platform-browser/animations';
  
import { AppComponent } from './app.component';
import { CalendarModule } from 'primeng/calendar';
  
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        FormsModule,
        CalendarModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
  
export class AppModule { }

输出:

Angular PrimeNG表格日历选择模式组件

例子2：在这个例子中，我们把选择模式设置为 “范围”，有一个开始日期和一个结束日期。

<h2 style="color: green">GeeksforGeeks</h2>
<h4>Angular PrimeNG Form Calendar 
    Selection Mode Component</h4>
  
<p-calendar 
    placeholder="Select the Range"
    selectionMode="range"
    [(ngModel)]="calendarVal">
</p-calendar>

import { Component } from "@angular/core";
  
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
})
  
export class AppComponent { 
    calendarVal?: Date;
}

import { NgModule } from '@angular/core';
import { BrowserModule } 
    from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule } 
    from '@angular/platform-browser/animations';
  
import { AppComponent } from './app.component';
import { CalendarModule } from 'primeng/calendar';
  
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        FormsModule,
        CalendarModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
  
export class AppModule { }

输出:

Angular PrimeNG表格日历选择模式组件