Angular PrimeNG Form Calendar Properties Component

Last Updated : 21 Dec, 2022

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. In this article, we will know how to use the Calendar Properties in Angular PrimenNG.

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.

Angular PrimeNG Form Calendar Properties:

defaultDate: It is used to set the default date to highlight on the first opening if the field is blank.
selectionMode: It is used to define the quantity of the selection, valid values are “single”, “multiple” and “range”.
style: It is used to give the Inline style of the component.
styleClass: It is the Style class of the component.
inputStyle: It is used to set the Inline style of the input field.
inputStyleClass: It is used to set the Style class of the input field.
inputId: It is an ID identifier of the underlying input element.
name: It is used to set the Name of the input element.
placeholder: It is used to set the Placeholder text for the input.
Disabled: It is used to disable the checkbox.
dateFormat: It is used to set the Format of the data which can also be defined in locale settings.
inline: It is used to display the calendar as inline. The default is false for popup mode.
showOtherMonths: It is used to display dates in other months (non-selectable) at the start or end of the current month.
showIcon: It is used to display a button with an icon next to the input.
showOnFocus: It is used to set focus on the component.
showWeek: It is used to show week numbers.
Icon: It is used as the icon of the calendar button.
appendTo: This property takes the ID of the element to Which the overlay is appended.
readonlyInput: It is used to prevent entering the date manually with the keyboard.
shortYearCutoff: It is used to show the cutoff year for determining the century for a date.
minDate: It is used to show the minimum selectable date.
maxDate: It is used to show the maximum selectable date.
disabledDates: It is used to show the array with dates that should be disabled (not selectable).
disabledDays: It is used to show the array with weekday numbers that should be disabled (not selectable).
monthNavigator: It is used to show whether the month should be rendered as a dropdown instead of text.
yearNavigator: It is used to show whether the year should be rendered as a dropdown instead of text.
yearRange: It is used to show the range of years displayed in the year drop-down in (nnnn:nnnn) format such as (2000:2020).
showTime: It is used to show the display time picker.
hourFormat: It is used to specify a 12 or 24-hour format.
locale: It is used to show an object having regional configuration properties for the calendar.
timeOnly: It is used to show the display time picker only.
timeSeparator: It is used to show the separator of the time selector.
dataType: It is the type of the value to write back to ngModel, default is date and the alternative is a string.
required: It is used to specify that an input field must be filled out before submitting the form.
Tabindex: It is used to set the Index of the element in tabbing order.
ariaLabelledBy: It is the ariaLabelBy property that Establishes relationships between the component and label(s) where its value should be one or more element IDs.
showSeconds: It is used to specify Whether to show the seconds in the time picker.
stepHour: It is used to specify Hours to change per step.
stepMinute: It is used to specify Minutes to change per step.
stepSecond: It is used to specify Seconds to change per step.
maxDateCount: It is used to specify a maximum number of selectable dates in multiple modes.
showButtonBar: It is used to specify whether to display today and clear buttons at the footer.
todayButtonStyleClass: It is used to specify the Style class of the today button.
clearButtonStyleClass: It is used to specify the Style class of the clear button.
baseZIndex: It is used to specify the Base zIndex value to use in layering.
autoZIndex: It is used to specify whether to automatically manage to layer.
panelStyleClass: It is used to specify the Style class of the datetimepicker container element.
panelStyle: It is used to set the Inline style of the datetimepicker container element.
keepInvalid: It is used to Keep invalid values when input blur.
hideOnDateTimeSelect: It is used to specify whether to hide the overlay on date selection.
numberOfMonths: It is used to specify the number of months to display.
view: It is used to specify the type of view to display.
multipleSeparator: It is used to specify Separator for multiple selection modes.
rangeSeparator: It is used to specify Separator for joining start and end dates on range selection mode.
touchUI: It is used to specify a calendar overlay that is displayed as optimized for touch devices.
focusTrap: It is used to specify only focus on elements inside the calendar.
showTransitionOptions: It is used to set the Transition options of the show animation.
hideTransitionOptions: It is used to set the Transition options of the hide animation.
firstDayOfWeek: It is used to define the first of the week for various date calculations.

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.

Steps to run the application: Run the below command to see the output

npm run

Example 1: Below is the example code that illustrates the use of the Angular PrimeNG Form Calendar Properties Component using the dateFormat property.

app.component.html:

HTML

<h1 style="color: green">GeeksforGeeks</h1>
<h4>Angular PrimeNG Form Calendar Properties</h4>
 
<h5>Date Format="dd.mm.yy"</h5>
<p-calendar [(ngModel)]="gfg1" 
    dateFormat="dd.mm.yy"
    placeholder="dd.mm.yy">
</p-calendar>
 
<h5>Date Format="mm.yy.dd"</h5>
<p-calendar [(ngModel)]="gfg2" 
    dateFormat="mm.yy.dd"
    placeholder="mm.yy.dd">
</p-calendar>

app.component.ts:

Javascript

import { Component } from '@angular/core';
 
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
 
export class AppComponent { }

app.module.ts:

Javascript

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 code that illustrates the use of the Angular PrimeNG Form Calendar Properties Component using the showButtonBar, numberOfMonths, and view properties.

app.component.html:

HTML

<h1 style="color: green">GeeksforGeeks</h1>
<h4>Angular PrimeNG Form Calendar Properties</h4>
 
<h5>Using Button Bars</h5>
<p-calendar [(ngModel)]="gfg1" showButtonBar="true"></p-calendar>
 
<h5>Using Multiple Months</h5>
<p-calendar [(ngModel)]="gfg2" [numberOfMonths]="4"></p-calendar>
 
<h5>Using Months Picker</h5>
<p-calendar [(ngModel)]="gfg3" view="month"></p-calendar>
 
<h5>Using Year Picker</h5>
<p-calendar [(ngModel)]="gfg4" view="year"></p-calendar>

app.component.ts:

Javascript

import { Component } from '@angular/core';
 
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
 
export class AppComponent { }

app.module.ts:

Javascript

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