Angular PrimeNG 表格日历日期格式组件

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

日历组件用于输入用户的日期和时间。日历组件的默认日期格式是“mm/dd/yy”。dateFormat属性被用来定制日期格式。下面的选项可以作为日期格式的一部分使用。

DateFormat 选项:

d:它用于显示没有前导零的月份的日期。
dd: 用来显示两位数的月份的日期。
o:它用于显示没有前导零的月份的日期。
oo:它用于显示三位数的月日。
D：它用于显示当天的简称。
DD：它用于显示当天的长条形名称。
m:它用于显示没有前导零的年份的月份。
mm。它用于以两位数显示当年的月份。
M：用于显示月名的简称。
MM：它用于以长形式显示月份的名称。
y:它用于显示两位数的年份。
yy。它用于显示四位数的年份。
@:它用于显示Unix的时间戳（自1970年1月1日起的毫秒）。
!:它用于显示Windows的刻度（自01/01/0001起100ns）。
'...':它用于显示字面上的文本。
":它用于显示一个单引号。
其他任何东西：字面上的文本

Angular PrimeNG Form Calendar DateFormat属性：

dateFormat。此属性用于格式化日历所选的日期。

语法:

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

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

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

ng new appname

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

cd appname

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

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

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

Angular PrimeNG Form Calendar DateFormat组件

Project Structure

例子1：在这个例子中，我们将dateFormat属性设置为“DD, dd/mm/yy”，它以dd/mm/yy格式显示当天的全名和日期。

<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>

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 Form Calendar DateFormat组件

例子2：这是另一个为日历设置自定义日期格式的例子，我们将日历的dateFormat属性设置为“dd/mm/yy – D”。

<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>

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 Form Calendar DateFormat组件