Angular PrimeNG表格日历禁用特定日期和/或日期组件

Angular PrimeNG是一个用于Angular应用程序的交互式UI组件的集合。开发人员可以使用这些组件在短时间内制作出漂亮的、响应式的网页界面，因为大多数组件都实现了所有必要的功能。在这篇文章中，我们将讨论Angular PrimeNG Form Calendar Disable specific dates and/or days Component.。

日历组件用于用户的日期和时间输入。要禁用特定的日期和/或日期，首先将readonlyInput设置为true，这样用户就不能用键盘输入日期。现在使用disabledDates属性禁用日期和/或使用disabledDays属性禁用日期。

Angular PrimeNG表格日历禁用特定日期和/或日期属性：

readonlyInput:此属性用于禁止用户手动输入日期。
disabledDates:它指定了不能被选择的禁用日期。它接受一个日期类型的数组，默认值为空。
disabledDays: 它指定了日历中的禁用日期。它接受一个Number类型的数组（工作日的数字）。默认值为空。

语法:

<p-calendar 
    [(ngModel)]="..." 
    [disabledDates]="..." 
    [disabledDays]="[0,1]" 
    [readonlyInput]="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

例子1：在这个例子中，我们禁用了 “10/2/2022″、”10/4/2022 “和 “10/6/2022″，所以这些日期不能被用户选中。

<h2 style="color: green">GeeksforGeeks</h2>
<h4>Angular PrimeNG Form Calendar Disable 
    specific dates and/or days Component</h4>
  
<p-calendar 
    [(ngModel)]="calendarVal" 
    [disabledDates]="disabledDatesArr" 
    [readonlyInput]="true">
</p-calendar>

import { Component } from "@angular/core";
  
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
})
  
export class AppComponent { 
    calendarVal?: Date;
    disabledDatesArr = [
        new Date("10/2/2022"), 
        new Date("10/4/2022"), 
        new Date("10/6/2022")
    ];
}

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：在这个例子中，我们把disabledDays设置为[0, 2, 4]，以禁止选择星期日、星期二和星期四。

<h2 style="color: green">GeeksforGeeks</h2>
<h4>Angular PrimeNG Form Calendar Disable 
    specific dates and/or days Component</h4>
  
<p-calendar 
    [(ngModel)]="calendarVal" 
    [disabledDays]="[0,2,4]" 
    [readonlyInput]="true">
</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表格日历禁用特定日期和/或日期组件