Angular 5 ng-bootstrap datepicker Disable specific dates from array

Question

I'm using the bootstrap datepicker from this link. The issue that I have is how to disable specific dates from an array. So far I've been able to disable Saturday and Sunday from the calendar.

My array would contain all the dates i get from my service and from then depending on those dates, I would have to mark them as disable on the calendar.

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

Just code · Accepted Answer · 2019-01-11 09:14:15Z

2

I found this thread before few days, this looks interesting you can implement for your scenario too.

There is one property called markDisabled which you can use in your scenario

initialize it like this in your component

  markDisabled;

and then wherever you call the service you can update the variable with the function

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

remember in your case implementation can be different which you need to take care of.

and use it in the view like this

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

demo

answered Jan 11, 2019 at 9:14

Just code

13.8k10 gold badges54 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jay Soorjun Over a year ago

Thank you for your help. I've used another plugin from PrimeNG [primefaces.org/primeng/#/calendar] to get more control.

User123 Over a year ago

any idea how to make [markDisabled] work on input element? stackoverflow.com/questions/55267988/…

ANURAG RANJAN Over a year ago

Only weekends are disabled is there any way to disable specific dates like "June month disable 15th and 17th of June" "July month disable 18th and 10 of july"

Collectives™ on Stack Overflow

Angular 5 ng-bootstrap datepicker Disable specific dates from array

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related