要在Angular 5的ng-bootstrap日期选择器中禁用特定日期,您可以使用ng-bootstrap的CustomDatepickerDayViewComponent来自定义日期选择器的外观和行为。以下是一个示例代码,演示如何禁用特定日期的数组:
import { Component, Input } from '@angular/core';
import { NgbDatepickerDayView } from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'app-custom-datepicker-day-view',
template: `
{{ date.day }}
`,
styles: [
`
.disabled {
background-color: #eee;
color: #999;
}
`
]
})
export class CustomDatepickerDayViewComponent extends NgbDatepickerDayView {
@Input() disabledDates: Date[];
isDisabled(date: NgbDateStruct): boolean {
const d = new Date(date.year, date.month - 1, date.day);
return this.disabledDates.some(disabledDate => {
return d.getTime() === disabledDate.getTime();
});
}
}
import { Component } from '@angular/core';
import { NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'app-root',
template: `
ng-bootstrap Datepicker
`,
styles: [`
.container {
margin-top: 50px;
}
`]
})
export class AppComponent {
customDayView = CustomDatepickerDayViewComponent;
disabledDates: Date[] = [
new Date(2021, 0, 1), // January 1, 2021
new Date(2021, 0, 15) // January 15, 2021
];
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { AppComponent } from './app.component';
import { CustomDatepickerDayViewComponent } from './custom-datepicker-day-view.component';
@NgModule({
declarations: [
AppComponent,
CustomDatepickerDayViewComponent
],
imports: [
BrowserModule,
NgbModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
这样,您就可以使用自定义日期选择器组件,并在disabledDates数组中指定要禁用的特定日期。