时间戳

首页 > 解决方案 > Angular 5 ng-bootstrap datepicker 禁用数组中的特定日期

angular - Angular 5 ng-bootstrap datepicker 禁用数组中的特定日期

问题描述

我正在使用此链接中的引导日期选择器。我遇到的问题是如何禁用数组中的特定日期。到目前为止，我已经能够从日历中禁用周六和周日。

我的数组将包含我从我的服务中获得的所有日期，然后根据这些日期，我必须在日历上将它们标记为禁用。

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

标签： angularbootstrap-datepicker

解决方案

几天前我发现了这个线程，这看起来很有趣，你也可以为你的场景实现。

markDisabled您可以在场景中使用一个名为的属性

在您的组件中像这样初始化它

  markDisabled;

然后无论您在哪里调用服务，都可以使用函数更新变量

  this.markDisabled = (date: NgbDate) => calendar.getWeekday(date) >= 6;

请记住，在您的情况下，您需要注意的实施可能会有所不同。

并像这样在视图中使用它

<ngb-datepicker [(ngModel)]="model" [markDisabled]="markDisabled"></ngb-datepicker>

演示

推荐阅读