Angular PrimeNG表格日历时间组件

Angular PrimeNG是一个由谷歌开发和维护的Angular框架的UI组件集合。它使开发人员能够在更短的时间内开发出可扩展和响应式的界面，从而提高生产力。在这篇文章中，我们将看到Angular PrimeNG表格日历时间组件。

日历组件用于输入用户的日期和时间。日历中的时间选择器是用来让用户选择时间的。它可以在有或没有日历的情况下显示。hourFormat属性用于指定要使用的时间格式。

Angular PrimeNG表格日历时间属性：

showTime: 此属性用于指定是否与日历一起显示时间选择器。
hourFormat。它用于指定是否以12小时或24小时格式显示时间选择器。
showSeconds:它用于指定是否在时间选择器中显示秒。
timeOnly:如果这个属性被设置为 “true”，将只显示时间选择器。
timeSeparator。这是一个字符串，用于分隔小时、分钟和秒。

语法:

<p-calendar 
    [(ngModel)]="..." 
    [showTime]="true"
    hourFormat="12"
    [timeOnly]="true">
</p-calendar>

创建Angular应用程序并安装模块：

第1步：使用以下命令创建一个Angular应用程序。

ng new appname

第2步：创建你的项目文件夹即appname后，使用以下命令移动到它。

cd appname

第3步：最后，在你给定的目录中安装PrimeNG。

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

项目结构：在完成上述步骤后，项目结构将看起来像这样。

Angular PrimeNG表格日历时间组件

Project Structure

要运行上述文件，请运行以下命令。

ng serve --save

例子1：这是一个基本的例子，说明如何以日历显示的12小时格式启用日期选择器。

<h2 style="color: green">GeeksforGeeks</h2>
<h4>Angular PrimeNG Form Calendar Time Component</h4>
  
<h3>Calendar with Time in 12-hour Format</h3>
<p-calendar [showTime]="true"
            hourFormat="12"
            [(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 { }

输出:

Angular PrimeNG表格日历时间组件

例子2：在这个例子中，我们将timeOnly属性设置为true，只显示时间选择器，而禁用日期选择器。hourFormat已被设置为 “24”。

<h2 style="color: green">GeeksforGeeks</h2>
<h4>
      Angular PrimeNG Form 
    Calendar Time Component
</h4>
  
<h3>TimeOnly in 24-hour Format</h3>
<p-calendar [showTime]="true"
            [timeOnly]="true"
            hourFormat="24"
            [(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 { }

输出:

Angular PrimeNG表格日历时间组件