Angular PrimeNG日历组件

Angular PrimeNG是一个开源框架，它有丰富的原生Angular UI组件，可以用来做很好的造型，这个框架用来做响应式的网站非常容易。在这篇文章中，我们将了解如何在Angular ngx bootstrap中使用日历组件。

日历组件：它用于显示一个按月计算的日历，允许用户选择日期并移动到下个月或上个月。

属性：

defaultDate：用于设置默认日期，如果该字段为空白，则在第一次打开时突出显示。
selectionMode。它用于定义选择的数量，有效值是 “单一”、”多个 “和 “范围”。
style。它用于给出组件的Inline样式。
styleClass。这是该组件的风格类。
inputStyle。它用于设置输入字段的内联样式。
inputStyleClass。它用于设置输入字段的风格类。
inputId。它是底层输入元素的ID标识符。
name: 它用于设置输入元素的名称。
placeholder。它用于设置输入的占位符文本。
Disabled。它用于禁用该复选框。
dateFormat。它用于设置日期的格式，也可以在地区设置中定义。
inline。它用于以内联方式显示日历。对于弹出模式，默认为false。
showOtherMonths:它用于在当前月份的开始或结束时显示其他月份的日期（不可选择）。
showIcon: 它用于在输入旁边显示一个带有图标的按钮。
showOnFocus：它用于设置组件的焦点。
showWeek:它用于显示星期数。
icon：它用于日历按钮的图标。
appendTo:这个属性是指叠加到哪个元素上的ID。
readonlyInput。它用于防止用键盘手动输入日期。
shortYearCutoff：它用于显示确定一个日期的世纪的截止年份。
minDate：用于显示最小可选日期。
maxDate：它用于显示最大的可选择日期。
disabledDates:它用于显示应该被禁用（不可选择）的日期数组。
disabledDays: 它用于显示应该被禁用的工作日号码的数组（不可选择）。
monthNavigator。它用于显示月份是否应该呈现为下拉菜单而不是文本。
yearNavigator。它用于显示年份是否应该被呈现为下拉式而不是文本。
yearRange。它用于显示年份下拉菜单中显示的年份范围，格式为（nnnn:nnnn），如（2000:2020）。
showTime: 它用于显示显示时间选择器。
hourFormat。它用于指定12或24小时的格式。
locale。它用于显示一个具有日历区域配置属性的对象。
timeOnly:它只用于显示显示时间选择器。
timeSeparator。它用于显示时间选择器的分隔符。
dataType。它是写回ngModel的值的类型，默认是日期，备选是字符串。
required。它用于指定在提交表单前必须填写一个输入字段。
Tabindex。它用于设置元素在标签顺序中的索引。
ariaLabelledBy:ariaLabelBy属性建立了组件和标签之间的关系，其值应该是一个或多个元素ID。
showSeconds:它用于指定是否在时间选择器中显示秒。
stepHour：用于指定每一步要改变的小时数。
stepMinute。它用于指定每步的变化分钟数。
stepSecond：用于指定每步变化的秒数。
maxDateCount。它用于指定多种模式下的最大可选日期数。
showButtonBar: 它用于指定是否在页脚显示今日和清除按钮。
todayButtonStyleClass。它用于指定今天按钮的风格类。
clearButtonStyleClass。它用于指定清除按钮的风格类。
baseZIndex。它用于指定在分层中使用的基础ZIndex值。
autoZIndex。它用于指定是否自动管理分层。
panelStyleClass。它用于指定datetimepicker容器元素的风格类。
panelStyle。它用于设置datetimepicker容器元素的内联样式。
keepInvalid。它用于在输入模糊时保持无效的值。
hideOnDateTimeSelect:它用于指定是否在日期选择时隐藏覆盖层。
numberOfMonths。它用于指定要显示的月数。
view。它用于指定要显示的视图类型。
multipleSeparator。它用于指定多选模式的分隔符。
rangeSeparator:它用于指定在范围选择模式下连接开始和结束日期的分隔符。
touchUI。它用于指定显示为触摸设备优化的日历覆盖层。
focusTrap：它用于指定只关注日历内的元素。
showTransitionOptions。它用于设置显示动画的过渡选项。
hideTransitionOptions。用来设置隐藏动画的过渡选项。
firstDayOfWeek。它用于定义各种日期计算的一周中的第一天。

Events:

onSelect。它指定了当一个日期被选中时调用的回调。注意，当手动输入值时，这个事件不会被调用。
onBlur: 它指定了一个回调，在输入字段模糊的时候调用。
onFocus: 它指定了一个回调，以便在输入字段的焦点处调用。
onClose。它指定了一个回调，以便在关闭日期选择器面板时调用。
onShow。它指定了当日期选择器面板可见时要调用的回调。
onClickOutside：它指定了一个回调，在点击日期选择器面板之外时调用。
onInput。它指定了一个回调，当输入字段被输入时调用。
onTodayClick。它指定了一个回调，当今天按钮被点击时调用。
onClearClick。它指定了当清空按钮被点击时要调用的回调。
onMonthChange。它指定了一个回调，当使用导航器改变一个月份时调用。
onYearChange。它指定了一个回调，当使用导航器改变一个年份时调用。

Styling:

p-calendar。它指定了主要的容器元素。
p-calendar-w-btn: 当一个按钮被启用时，它指定了主容器元素。
p-calendar-timeonly: 它指定了仅在时间选择器模式下的主要容器元素。
p-inputtext。它指定了一个输入元素。
p-datepicker：它指定了Datepicker元素。
p-datepicker-inline。它指定了内联模式的Datepicker元素。
p-datepicker-monthpicker：它指定了月视图中的Datepicker元素。
p-datepicker-touch-p。它指定了触摸p模式下的Datepicker元素。
p-datepicker-calendar。它指定了一个包含一个月的日期的表格。
p-datepicker-current-day：它指定了所选日期的单元格。
p-datepicker-today。它指定了今天的日期的单元格。

Templates:

日期$implicit。它是组件的一个值。

Methods:

toggle。这有助于切换日历的可见性。

Date Formats:

d:月的日期（没有前导零）。
dd:月的日期（两位数）
o:年月日（无前导零）。
oo:年月日(三位数)
D: 日名的简称
DD: 长格式的日名
m:年的月份（没有前导零）。
mm。年的月份（两位数）
M: 月份名称的简称
MM: 月名的长式
y: Year (two-digit)
yy: Year (four-digit)
@:Unix时间戳（自1970年1月1日起的毫秒）。
!:窗口刻度（自01/01/0001起100ns）。
‘…’:字面文本
“：单引号
其他任何东西。字面文本

创建Angular应用程序和模块安装。

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

ng new appname

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

cd appname

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

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

项目结构。它将看起来像以下。

Angular PrimeNG日历组件

例子1：这是一个基本的例子，说明如何使用日历组件****。

<h2>GeeksforGeeks</h2>
<h4>PrimeNg Calendar Component</h4>
<p-calendar [inline]="true" [showWeek]="true"></p-calendar>

app.module.ts

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { HttpClientModule } from "@angular/common/http";
import { BrowserAnimationsModule } from 
    "@angular/platform-browser/animations";
  
import { AppComponent } from "./app.component";
  
import { CalendarModule } from "primeng/calendar";
  
@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    CalendarModule,
    FormsModule,
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

import { Component } from "@angular/core";
  
@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {}

输出:

Angular PrimeNG日历组件

例子2：我们将使用一个弹出式日历。

<div class="p-fluid p-grid p-formgrid">
  <div class="p-field p-col-12 p-md-4">
    <label>Basic</label>
    <p-calendar></p-calendar>
  </div>
  <div class="p-field p-col-12 p-md-4">
    <label>Calendar with Time</label>
    <p-calendar [showTime]="true"></p-calendar>
  </div>
</div>

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { HttpClientModule } from "@angular/common/http";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
  
import { AppComponent } from "./app.component";
  
import { CalendarModule } from "primeng/calendar";
  
@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    CalendarModule,
    FormsModule,
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

app.component.ts

import { Component } from "@angular/core";
  
@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {}

输出:

![Angular PrimeNG日历组件](E:\Translate\img\20221111155026.gif “Angular PrimeNG日历组件