Angular PrimeNG Form Calendar Button Bar组件

Angular PrimeNG是一个开源框架，拥有丰富的原生Angular UI组件，可以用来做很好的造型，这个框架用来制作响应式网站非常方便。本文将向我们展示如何在Angular PrimeNG中使用日历表格按钮栏组件。

日历组件用于显示一个按月划分的日历，允许用户选择日期并移动到下个月或上个月。按钮栏组件**可用于显示当前日期的按钮，并通过启用showButtonBar属性在日历的页脚部分清除选定的选项。

语法:

<p-calendar [(ngModel)]="dateValue" 
            showButtonBar="true"
            inputId="buttonbar">
</p-calendar>

Angular PrimeNG表格日历按钮栏属性：

• showButtonBar：它接受布尔值，可用于指定是否在页脚显示今日和清除按钮。

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

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

ng new appname

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

cd appname

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

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

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

Project Structure

运行以下命令：

ng serve --open

例子1：下面的例子说明了使用Angular PrimeNG Form的**按钮栏组件的使用。

<h2 style="color: green">GeeksforGeeks</h2>
<h4>PrimeNg Calendar Button Bar Component</h4>
<div class="p-fluid p-grid p-formgrid">
    <div class="p-field p-col-12 p-md-4">
        <p-calendar showButtonBar="true" 
                    placeholder="Select any date" 
                    inputId="btnbaar"> 
        </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 { BrowserAnimationsModule } 
    from "@angular/platform-browser/animations";
  
import { AppComponent } from "./app.component";
import { CalendarModule } from "primeng/calendar";
  
@NgModule({
  imports: [
      BrowserModule, 
    BrowserAnimationsModule, 
    CalendarModule],
  declarations: [AppComponent],
  bootstrap: [Appomponent],
})
export class AppModule {}

输出:

示例2：下面是另一段代码，说明了Angular PrimeNG Calendar Button Bar组件的使用，没有showButtonBar属性。

<h2 style="color: green">GeeksforGeeks</h2>
<h4>PrimeNg Calendar Button Bar Component</h4>
<div class="p-fluid p-grid p-formgrid">
    <div class="p-field p-col-12 p-md-4">
        <p-calendar placeholder="Select any date" 
                    inputId="btnbaar"> 
        </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 { BrowserAnimationsModule } 
    from "@angular/platform-browser/animations";
  
import { AppComponent } from "./app.component";
import { CalendarModule } from "primeng/calendar";
  
@NgModule({
  imports: [
      BrowserModule, 
    BrowserAnimationsModule, 
    CalendarModule],
  declarations: [AppComponent],
  bootstrap: [Appomponent],
})
export class AppModule {}

输出: