ngbdatepicker disable dates objects dynamically

Question

I am trying to disable only selected dates by the user. After multiple trials, I was able to do so, but it is disabling all the calendar. I want it to disable only the selected days.

Current materials on ng-bootstrap, only disable days as numbers, not objects:

https://ng-bootstrap.github.io/#/components/datepicker/overview

Typescript code:

import {Component, Input, Output, EventEmitter} from '@angular/core';
import {NgbDate, NgbCalendar} from '@ng-bootstrap/ng-bootstrap';
import { stringify } from '@angular/compiler/src/util';

@Component({
  selector: 'ngbd-datepicker-range',
  templateUrl: './datepicker-range.html',
export class NgbdDatepickerRange {    

  hoveredDate: NgbDate;
  fromDate: NgbDate;
  toDate: NgbDate;
  DiffDate:number;
  startDate;
  endDate;

 disabeledDays: NgbDate [] = new Array(); //this is array of date objects, which i want to disable



  constructor(calendar: NgbCalendar) {
    this.fromDate = calendar.getToday();
    this.toDate = calendar.getNext(calendar.getToday(), 'd', 1);      
    this.DiffDate=this.calcDaysDiff();     
  }

 isDisabled = (date: NgbDate) => {
    for (var i =0; i < this.disabeledDays.length;i++){
      date= this.disabeledDays[i]; 
      console.log(date);   
    } return date;
  } //this is function for disabling the dates

 onDateSelection(date: NgbDate) {
    console.log('onDateSelection:', date);
    if (!this.fromDate && !this.toDate) {
      this.fromDate = date;
      this.DiffDate = this.calcDaysDiff();
      this.FromDateEvent.emit(date);


    } else if (this.fromDate && !this.toDate && date.after(this.fromDate)) {
      this.toDate = date;
      this.DiffDate = this.calcDaysDiff();
      this.EndDateEvent.emit(date);


    } else {
      this.toDate = null;
      this.fromDate = date;

      this.FromDateEvent.emit(date);

      this.disabeledDays.push(date); //pushing a date to the array of disabled dates
    }
  }

}

HTML:

ngb-datepicker [markDisabled]="isDisabled" #dp (select)="onDateSelection($event)" [displayMonths]="2" [dayTemplate]="t" outsideDays="hidden"
>
</ngb-datepicker>



<ng-template #t let-date let-focused="focused" class="container">
  <span class="custom-day"
        [class.focused]="focused"
        [class.range]="isRange(date)"
        [class.faded]="isHovered(date) || isInside(date)"
        (mouseenter)="hoveredDate = date"
        (mouseleave)="hoveredDate = null">
    {{ date.day }}
  </span>
</ng-template>

Any suggestions?

Hey there, is there a specific pattern (eg. all past dates, weekends, etc) when it comes to the dates you want to delete? Or are they any random dates? — wentjun
– wentjun, Commented Apr 25, 2019 at 18:28
Hey, actually not. It is only the dates to be selected by the user. So, there is no pre-selected dates, or min/max dates — AbdalRahman Farag
– AbdalRahman Farag, Commented Apr 25, 2019 at 18:38
Thanks, my friend...It is working just fine...Have a wonderful day — AbdalRahman Farag
– AbdalRahman Farag, Commented Apr 26, 2019 at 19:28

wentjun · Accepted Answer · 2019-04-25 18:41:37Z

2

You will need to make some changes to your isDisabled property. In short, you are supposed to return a boolean value (true or false), rather than the NgbDate date object as stated on your original code. .from() is actually part of the NgbDate API, and it creates a new date object from the NgbDateStruct.

isDisabled = (date: NgbDateStruct, current: {month: number, year: number})=> {
  return this.disabledDates.find(x => NgbDate.from(x).equals(date))? true: false;
}

disabledDates represents the array of NgbDate objects which are meant to be disabled on the datepicker itself.

disabledDates: NgbDateStruct[] = [ 
  {year: 2019, month:4, day:10},
  {year: 2019, month:4, day:12},
  {year: 2019, month:4, day:14},
];

Here is a demo, do check it out to see how it works.

answered Apr 25, 2019 at 18:41

wentjun

42.8k10 gold badges108 silver badges116 bronze badges

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

Collectives™ on Stack Overflow

ngbdatepicker disable dates objects dynamically

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related