Angular PrimeNG Form Calendar DateFormat Component

Angular PrimeNG is a collection of UI components for the Angular framework developed and maintained by Google. It enables developers to develop scalable and responsive interfaces in less time and hence increases productivity. In this article, we will see Angular PrimeNG Form Calendar DateFormat Component.

The Calendar Component is used to input the user’s date and time. The default date format of the calendar component is “mm/dd/yy”. The dateFormat property is used to customize the date format. The below options can be used as a part of the date format.

DateFormat Options:

• d: It is used to show the day of the month without leading zero.
• dd: It is used to show the day of the month in two digits.
• o: It is used to show the day of the month without the leading zero.
• oo: It is used to show the day of the month in three digits.
• D: It is used to show the day’s name in short form.
• DD: It is used to show the day’s name in long form.
• m: It is used to show the month of the year without the leading zero.
• mm: It is used to show the month of the year in two digits.
• M: It is used to show the month’s name in short form.
• MM: It is used to show the month’s name in long form.
• y: It is used to show the year in two digits.
• yy: It is used to show the year in four digits.
• @: It is used to show the Unix timestamp (ms since 01/01/1970).
• !: It is used to show the Windows ticks (100ns since 01/01/0001).
• ‘…’: It is used to show literal text.
• ”: It is used to show a single quote.
• anything else: literal text

Angular PrimeNG Form Calendar DateFormat Properties:

• dateFormat: This property is used to format the date picked by the calendar.

Syntax:

<p-calendar
    dateFormat="DD, dd/mm/yy"
    [(ngModel)]="calendarVal">
</p-calendar>

Creating Angular Application and Installing the Module:

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: Finally, Install PrimeNG in your given directory.

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

Project Structure: The project Structure will look like this after following the above steps:

Project Structure

Example 1: In this example, we set the dateFormat property to “DD, dd/mm/yy”, which shows the full name of the day and the date in dd/mm/yy format.

app.component.html

<h2 style="color: green">GeeksforGeeks</h2>
<h4>
    Angular PrimeNG Form Calendar
    DateFormat Component
</h4>

<h3>DateFormat = DD, dd/mm/yy</h3>
<p-calendar
       dateFormat="DD, dd/mm/yy"
    [(ngModel)]="calendarVal">
</p-calendar>

app.component.ts

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

@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
})

export class AppComponent {
    calendarVal?: Date;
}

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,
        FormsModule,
        CalendarModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }

Output:

Example 2: This is another example of setting a custom date format to the calendar, where we set the dateFormat property of the calendar to “dd/mm/yy – D”.

app.component.html

<h2 style="color: green">GeeksforGeeks</h2>
<h4>
    Angular PrimeNG Form Calendar
    DateFormat Component
</h4>

<h3>DateFormat = dd/mm/y - D</h3>
<p-calendar
    dateFormat="dd/mm/y - D"
    [(ngModel)]="calendarVal">
</p-calendar>

app.component.ts

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

@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
})

export class AppComponent {
    calendarVal?: Date;
}

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,
        FormsModule,
        CalendarModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }

Output:

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