Angular PrimeNG Form Calendar Button Bar Component

Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. This article will show us how to use the Calendar Form Button Bar component in Angular PrimeNG.

The Calendar component is used to display a month-wise calendar that allows the user to select dates and move to the next or previous month. The Button Bar Component can be used to display the buttons for the current date & clear the selected option on the footer section of the calendar by enabling the showButtonBar property.

Syntax:

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

Angular PrimeNG Form Calendar Button Bar Properties:

• showButtonBar: It accepts the boolean value that can be used to specify whether to display today and clear buttons at the footer or not.

Creating Angular Application & Module  Installation:

• Step 1: Create an Angular application using the following command.

ng new appname

• Step 2: After creating your project folder i.e. appname, move to it using the following command.

cd appname

• Step 3: Install PrimeNG in your given directory.

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

Project Structure: It will look like the following:

Project Structure

Run the below command:

ng serve --open

Example 1: Below is the example that illustrates the use of the Button Bar Component using the Angular PrimeNG Form.

app.component.html

<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>

app.component.ts

import { Component } from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {}

app.module.ts

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 {}

Output:

Example 2: Below is another code that illustrates the use of the Angular PrimeNG Calendar Button Bar component without the showButtonBar property.

app.component.html

<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>

app.component.ts

import { Component } from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {}

app.module.ts

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 {}

Output:

Reference: https://primefaces.org/primeng/calendar