Angular PrimeNG Form Calendar Multiple Months组件

Angular PrimeNG是一个开源框架，它有丰富的原生Angular UI组件，可以用来做很好的造型，这个框架用来做响应式网站，非常方便。在这篇文章中，我们将看到如何在Angular PrimeNG中使用带有多月组件的日历表格。日历组件**可以用来显示一个按月划分的日历，允许用户选择日期并移动到下个月或上个月。

Angular PrimeNG Form Calendar Multiple Months组件用于同时显示多个月份的日历。日历的数量取决于[numberOfMonths]属性中指定的数量。

语法:

<p-calendar
  placeholder="...."
  inputId="..."
  [numberOfMonths]="...">
</p-calendar>

Angular PrimeNG Form Calendar Multiple Months 属性：

• numberOfMonths。它用于指定要显示的月数。

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

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

ng new appname

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

cd appname

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

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

项目结构。它将看起来像以下。

Project Structure

例子1：下面的例子说明了Angular PrimeNG Form Multiple Months Component的使用。

<h2 style="color: green">GeeksforGeeeks</h2>
<h5>PrimeNG Tooltip Delay - showDelay</h5>
<div class="p-grid p-fluid">
    <div class="p-col-12 p-md-3">
        <input type="text" 
               pInputText pTooltip="It is a tooltip" 
               placeholder="Hover here..." 
               tooltipEvent="hover" 
               showDelay="2000" /> 
    </div>
</div>

import { Component } from '@angular/core';
  
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {}

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,
    CalendarModule,
    FormsModule,
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

• 运行以下命令。

ng serve --open

输出:

例子2：下面是另一个例子，说明了Angular **PrimeNG Form Multiple Months Component的使用。

<h2 style="color: green">GeeksforGeeks</h2>
<h4>PrimeNg Calendar Multiple Months Component</h4>
<div class="p-fluid p-grid p-formgrid">
    <div class="p-field p-col-12 p-md-4">
        <p-calendar 
           placeholder="Select multiple dates" 
           inputId="mltimonths" 
           [numberOfMonths]="3"> 
    </p-calendar>
    </div>
</div>

import { Component } from '@angular/core';
  
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {}

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,
    CalendarModule,
    FormsModule,
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

输出: