Angular PrimeNG表格日历触摸UI组件
Angular PrimeNG是一个由谷歌开发和维护的Angular框架的UI组件集合。它使开发人员能够在更短的时间内开发出可扩展和响应式的界面,从而提高生产力。在这篇文章中,我们将看到**Angular PrimeNG表格日历触摸UI组件。
日历组件用于输入用户的日期和时间。日历触摸用户界面模式针对触摸设备进行了优化,可以通过设置touchUI属性为true来启用。在这种模式下,日历叠加将显示在屏幕的中心。同时,将readonlyInput属性设置为true,以防止在触摸设备上打开键盘。
Angular PrimeNG表格日历触摸UI属性:
- touchUI。此属性用于启用日历组件的touchUI模式。
- readonlyInput:此属性用于禁止用户手动输入日期。
语法:
<p-calendar
[(ngModel)]="..."
[touchUI]="true"
[readonlyInput]="true">
</p-calendar>
创建Angular应用程序并安装模块:。
第1步:使用以下命令创建一个Angular应用程序。
ng new appname
第2步:创建你的项目文件夹即appname后,使用以下命令移动到它。
cd appname
第3步:最后,在你给定的目录中安装PrimeNG。
npm install primeng --save
npm install primeicons --save
项目结构:在完成上述步骤后,项目结构将看起来像这样。
Project Structure
例子1:在这个例子中,我们将日历的touchUI属性设置为 “true”,以便在屏幕中央以叠加的方式显示它。
<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>
import { Component } from "@angular/core";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
})
export class AppComponent {
calendarVal?: Date;
}
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 { }
输出:
例子2:在这个例子中,我们将日历的timeOnly属性设置为 “true”,所以当日历叠加出现时,它向我们显示了只挑选小时和分钟的选项。
<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>
import { Component } from "@angular/core";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
})
export class AppComponent {
calendarVal?: Date;
}
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 { }
输出: