Open In App

Angular PrimeNG Form Calendar Month Picker Component

Improve
Improve
Like Article
Like
Save
Share
Report

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 Month 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 Month Picker Component is used to pick the month of the corresponding year.

Syntax:

<p-calendar
     view="month"
     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 Month Picker Component.

app.component.html




<h2 style="color: green">GeeksforGeeks</h2>
<h4>PrimeNg Calendar Months Picker Component</h4>
  
<div class="p-fluid p-grid p-formgrid">
    <div class="p-field p-col-12 p-md-4">
        <p-calendar
          view="month"
          dateFormat="mm/yy"
          [readonlyInput]="false"
          inputId="pickmonth"
          placeholder="Pick any month">
        </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 Month 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 Month Picker Component</h4>
  
<div class="p-fluid p-grid p-formgrid">
    <div class="p-field p-col-12 p-md-4">
        <p-calendar
          view="month"
          dateFormat="yy/mm"
          [readonlyInput]="true"
          inputId="pickmonth"
          placeholder="Pick any month">
        </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



Last Updated : 06 Jan, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads