Open In App

Angular PrimeNG Form Calendar Date Restriction Component

Improve
Improve
Like Article
Like
Save
Share
Report

Angular PrimeNG is a collection of Interactive UI components for Angular applications. Developers can use these components to make beautiful and responsive web interfaces in no time as most of the components have all the necessary functions implemented. In this article, we will be discussing the Angular PrimeNG Form Calendar Date Restriction Component.

The Calendar Component is used for date and time input from the user. To restrict selectable dates to a range set the readonlyInput property to true so that users cannot enter dates using the keyboard. Now set the minDate and maxDate properties to the desired start and end date.

Angular PrimeNG Form Calendar Date Restriction Properties:

  • readonlyInput: This property is used to disable the manual entering of the date by the user.
  • minDate: This property is used to set the lowermost selectable date.
  • maxDate: This property is used to set the uppermost selectable date.

 

Syntax:

<p-calendar 
    [(ngModel)]="..." 
    [minDate]="..." 
    [maxDate]="..." 
    [readonlyInput]="true">
</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 minDate to “9/15/2022” so the dates before that cannot be selected.

app.component.html




<h2 style="color: green">GeeksforGeeks</h2>
<h4>
      Angular PrimeNG Form Calendar 
    Date Restriction Component
</h4>
  
<p-calendar 
    [(ngModel)]="calendarVal" 
    [minDate]="minDateVal" 
    [readonlyInput]="true">
</p-calendar>


app.component.ts




import { Component } from "@angular/core";
  
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
})
  
export class AppComponent { 
    calendarVal?: Date;
    minDateVal = new Date("9/15/2022");
}


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: In this example, we set the minDate to “10/1/2022” and maxDate to “10/11/2022”. Any date outside this range cannot be selected.

app.component.html




<h2 style="color: green">GeeksforGeeks</h2>
<h4>
      Angular PrimeNG Form Calendar 
    Date Restriction Component
</h4>
  
<p-calendar 
    [(ngModel)]="calendarVal" 
    [minDate]="minDateVal" 
    [maxDate]="maxDateVal" 
    [readonlyInput]="true">
</p-calendar>


app.component.ts




import { Component } from "@angular/core";
  
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
})
  
export class AppComponent { 
    calendarVal?: Date;
    minDateVal = new Date("10/1/2022");
    maxDateVal = new Date("10/11/2022");
}


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



Last Updated : 07 Oct, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads