Question

我正在使用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>

Answer 1

几天前我发现了这个thread，这看起来很有趣，您也可以针对自己的情况实施。

有一个名为GROUP_CONCAT() function的属性，可以在方案中使用

在组件中像这样初始化它

markDisabled

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

  markDisabled;

在您的案例中记住的实现可能有所不同。

并在这样的视图中使用它

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

demo

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

1 个答案: