我正在使用this link中的引导日期选择器。 我的问题是如何禁用数组中的特定日期。到目前为止,我已经能够从日历中禁用周六和周日。
我的数组将包含我从服务中获得的所有日期,然后根据这些日期,我将不得不在日历上将其标记为禁用。
.ts
import { NgbActiveModal, NgbDateParserFormatter, NgbCalendar, NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
const now = new Date();
@Component({
selector: 'app-leaves-modal',
templateUrl: './leaves-modal.component.html',
styleUrls: ['./leaves-modal.component.css']
})
export class LeavesModalComponent implements OnInit {
public leavesTypes: Array<LeaveApproval> = [];
leaveEntitled: number;
leaveTaken: number;
leaveEntitledId: number;
date: Date;
constructor(
private formBuilder: FormBuilder,
public activeModal: NgbActiveModal,
private ngbDateParserFormatter: NgbDateParserFormatter,
private ngbCalendar: NgbCalendar,
) {
this.getLeaves();
this.getLeavesApproved();
}
minDate: NgbDateStruct = { year: now.getFullYear(), month: now.getMonth() + 1, day: now.getDate() };
ngOnInit() {
this.createForm();
}
getLeavesApproved() {
this.leaveManager.getApprovalDates().subscribe(res => {
for (var i = 0; i < res.length; i++) {
let a: any = res[0].startDate;
this.date = new Date(a);
}
});
}
isDisabled(date: NgbDateStruct) {
const d = new Date(date.year, date.month - 1, date.day);
return d.getDay() === 0 || d.getDay() === 6;
}
getLeaves() {
this.leaveManager.getLeaves().subscribe(res => {
this.leavesTypes = res;
});
}
}
.html
<div class="modal-header">
<h4 class="modal-title">Submit Leave Request</h4>
<button type="button" class="close" aria-label="Close"
(click)="activeModal.dismiss('Cross click')">
</button>
</div>
<form [formGroup]="myForm" (ngSubmit)="submitForm()">
<div class="modal-boy">
<div class="container">
<div class="row">
<div class="form-group col-sm-4">
<label for="vacationType">Reason</label>
<select class="form-control" id="vacationType"
name="vacationType" formControlName="vacationType">
<option *ngFor="let leave of leavesTypes"
[ngValue]="leave.id">{{leave.name}}</option>
</select>
</div>
<div class="form-group col-sm-4">
<label for="startDate">Start Date</label>
<input class="form-control" [minDate]="minDate"
[markDisabled]="isDisabled" placeholder="yyyy-mm-dd" name="startDate"
formControlName="startDate" ngbDatepicker #d1="ngbDatepicker"
(click)="d1.toggle()" required>
</div>
<div class="form-group col-sm-4">
<label for="endDate">End Date</label>
<input class="form-control" [minDate]="minDate"
[markDisabled]="isDisabled" placeholder="yyyy-mm-dd" name="endDate"
formControlName="endDate" (blur)="compareDates()" ngbDatepicker
#d2="ngbDatepicker" (click)="d2.toggle()" required>
</div>
<div class="form-group col-sm-8">
<div *ngIf="error.isError" class="alert alert-danger">
{{ error.errorMessage }}
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 col-sm-6">
<!-- <app-balance-card></app-balance-card> -->
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-success" [disabled]="!myForm.valid || error.isError">
Submit Form
</button>
</div>
</form>