Angular PrimeNG Form Calendar Year Picker 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 Year Picker component in Angular PrimeNG.

Calendar component: It is used to display a month-wise calendar that allows the user to select dates and move to the next or previous month.

Angular PrimeNG Form Calendar Year Picker Component is used to pick the year within a certain range.

Syntax:

<p-calendar
     view="year"
     dateFormat="..."
     [readonlyInput]="true"
     inputId="..."
     placeholder="...">
</p-calendar>

Angular PrimeNG Form Calendar Multiple Months Properties:

• readonlyInput: It is used to prevent entering the date manually with the keyboard.
• dateFormat: It is used to set the Format of the date which can also be defined in locale settings.
• view: It is used to specify the type of view to display.

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.

Run the below command to see the output.

ng serve --open

Example 1: Below is the example that illustrates the use of the Angular PrimeNG Form Year Picker Component.

app.component.html

<h2 style="color: green">GeeksforGeeks</h2>
<h4>PrimeNg Calendar Year Picker Component</h4>

<div class="p-fluid p-grid p-formgrid">
    <div class="p-field p-col-12 p-md-4">
        <p-calendar
          view="year"
          dateFormat="yy"
          [readonlyInput]="false"
          inputId="pickYear"
          placeholder="Pick any year">
        </p-calendar>
    </div>
</div>

app.component.ts

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

@Component({
    selector: 'app-root',
    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 { 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 {}

Output:

Example 2: Below is another example that illustrates the use of the Angular PrimeNG Form Year Picker Component using readOnlyInput=”true”, which will disable any manual inputs from the keyboard.

app.component.html

<h2 style="color: green">GeeksforGeeks</h2>
<h4>PrimeNg Calendar Year Picker Component</h4>

<div class="p-fluid p-grid p-formgrid">
    <div class="p-field p-col-12 p-md-4">
        <p-calendar
          view="year"
          dateFormat="yy"
          [readonlyInput]="true"
          inputId="pickYear"
          placeholder="Pick any year">
        </p-calendar>
    </div>
</div>

app.component.ts

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

@Component({
   selector: 'app-root',
   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 { 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 {}

Output:

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