Open In App

Angular PrimeNG Form Calendar Touch UI Component

Improve
Improve
Like Article
Like
Save
Share
Report

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 be seeing Angular PrimeNG Form Calendar Touch UI Component.

The Calendar Component is used to input the user’s date and time. The Calendar Touch UI mode is optimized for touch devices and can be enabled by setting the touchUI property to true. In this mode, the calendar overlay will be displayed in the center of the screen. At the same time, set the readonlyInput property to true to prevent the opening of the keyboard on touch devices.

Angular PrimeNG Form Calendar Touch UI Properties:

  • touchUI: This property is used to enable the touchUI mode of the calendar component.
  • readonlyInput: This property is used to disable the manual entering of the date by the user.

 

Syntax:

<p-calendar 
    [(ngModel)]="..." 
    [touchUI]="true" 
    [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 touchUI property of the calendar to true to display it as an overlay in the center of the screen.

app.component.html




<h2 style="color: green">GeeksforGeeks</h2>
<h4>
      Angular PrimeNG Form Calendar 
    Touch UI Component
</h4>
  
<p-calendar 
    placeholder="Select the Date"
    [touchUI]="true"
    [readonlyInput]="true"
    [(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: In this example, we set the timeOnly property of the calendar to true, so when the calendar overlay appears it shows us the options to pick hour and minute only.

app.component.html




<h2 style="color: green">GeeksforGeeks</h2>
<h4>Angular PrimeNG Form Calendar 
    Touch UI Component</h4>
  
<p-calendar 
    placeholder="Select the Date"
    [touchUI]="true"
    [readonlyInput]="true"
    [timeOnly]="true"
    [(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



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