Angular PrimeNG表格日历方法组件

Angular PrimeNG是PrimeTek开发的一个开源的前端UI框架，用于开发高效和可扩展的angular应用程序。在他们的项目中使用PrimeNG可以帮助开发人员减少开发时间，并专注于应用程序的其他重要领域。在这篇文章中，我们将看到**Angular PrimeNG表格日历方法组件。

日历组件用于接受用户的日期和时间输入。日历组件支持的方法列举如下。

Angular PrimeNG表格日历方法：

toggle。当日历处于弹出模式时，该方法用于切换日历的可见性。当日历以内联模式显示时，这不会有任何影响。

语法:

this.calendar.toggle();

创建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：这是一个基本的例子，说明在弹出模式下日历的切换方法的使用。

<h2 style="color: green">GeeksforGeeks</h2>
<h4>
    Angular PrimeNG Form Calendar
    Methods Component
</h4>
  
<button pButton label="Toggle!" 
        (click)="toggleCal()" 
        class="block mb-4">
</button>
  
<p-calendar #cal dateFormat="dd/mm/y - D" 
                 [(ngModel)]="calendarVal">
</p-calendar>

import { Component, ViewChild } from "@angular/core";
import { Calendar } from "primeng/calendar";
  
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
})
  
export class AppComponent {
    @ViewChild('cal') calendar!: Calendar;
    calendarVal?: Date;
  
    toggleCal() {
        this.calendar.toggle();
    }
}

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';
import { ButtonModule } from 'primeng/button';
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        FormsModule,
        CalendarModule,
        ButtonModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }

输出:

Angular PrimeNG表格日历方法组件

例子2：在这个例子中，当我们点击按钮时，切换方法被调用两次，一次是立即调用，第二次是在3秒后调用。

<h2 style="color: green">GeeksforGeeks</h2>
<h4>Angular PrimeNG Form Calendar
  Methods Component</h4>
  
<button pButton label="Toggle!" 
                (click)="toggleCal()" 
                class="block mb-4">
</button>
  
<p-calendar #cal dateFormat="dd/mm/y - D" 
                 [(ngModel)]="calendarVal">
</p-calendar>

import { Component, ViewChild } from "@angular/core";
import { Calendar } from "primeng/calendar";
  
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
})
  
export class AppComponent {
    @ViewChild('cal') calendar!: Calendar;
    calendarVal?: Date;
  
    toggleCal() {
        this.calendar.toggle();
        setTimeout(() => {
            this.calendar.toggle();
        }, 3000);
    }
}

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';
import { ButtonModule } from 'primeng/button';
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        FormsModule,
        CalendarModule,
        ButtonModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }

输出:

Angular PrimeNG表格日历方法组件