2

I have array existing data. how to disable existing data when picking date from ngbdatepicker?

here's my disable code from past date 

var current = new Date();
current.setDate(current.getDate());
this.minDates = {
                  year: current.getFullYear(),
                  month: current.getMonth() + 1,
                  day: current.getDate(),

                };

this is my code for existing dates array

var avDateArray = [];
 for(var i=0;i<this.tmpResponse[0].available_date.length;i++){
                  avDateArray.push(this.tmpResponse[0].available_date[i].start_date);
                }

what i confuse is how to disable date from existingdates array in ngbdatepicker in angular?

Soni Silalahi
  • 249
  • 2
  • 5
  • 15

3 Answers3

4

just create an array with the disabled dates

disabledDates:NgbDateStruct[]=[
    {year:2019,month:2,day:26}
  ]

And create a function "isDisabled"

  isDisabled=(date:NgbDateStruct,current: {month: number,year:number})=> {
    //in current we have the month and the year actual
    return this.disabledDates.find(x=>new NgbDate(x.year,x.month,x.day).equals(date))?
         true:false;
  }

  //or briefly

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

Your ngb-datepicker use [markDisabled]

<ngb-datepicker #dp [(ngModel)]="model" (navigate)="date = $event.next"
      [markDisabled]="isDisabled"></ngb-datepicker>

See stackblitz

Eliseo
  • 50,109
  • 4
  • 29
  • 67
1

Disabling and limiting dates

You can limit the dates available for navigation and selection using [minDate] and [maxDate] inputs. If you don't specify any of them, you'll have infinite navigation and the year select box will display [-10, +10] years from currently visible month.

If you want to disable some dates for selection (ex. weekends), you have to provide the [markDisabled] function that will mark certain dates not selectable. It will be called for each newly visible day when you navigate between months.

// disable the 13th of each month
const isDisabled = (date: NgbDate, current: {month: number}) => day.date === 13;
<ngb-datepicker [minDate]="{year: 2010, month: 1, day: 1}"
                [maxDate]="{year: 2048, month: 12, day: 31}"
                [markDisabled]="isDisabled">
</ngb-datepicker>

Refer the following link also: Mark-disabled-ng-bootstrap

ng-bootstrap

Jeyam Prakash
  • 211
  • 1
  • 6
  • Please be aware that the function needs to be an arrow function like in the example, otherwise "this" is not bound to the class context when the function is called from the datepicker. – cwillinx Jul 05 '23 at 11:34
0

Are you trying to disable past dates? You can do something like this:

On your component.ts

minDate = undefined;
.
. 
constructor(private config: NgbDatepickerConfig) {
  const current = new Date();
  this.minDate = {
    year: current.getFullYear(),
    month: current.getMonth() + 1,
    day: current.getDate()
  };

}
.
.
markDisabled(date: NgbDateStruct) {
  const d = new Date(date.year, date.month - 1, date.day);
  return d.getDate()===this.disabledDate.getDate() && d.getMonth()===this.disabledDate.getMonth && d.getYear()===this.disabledDate.getYear()
  })
}

and on your component.html, use the [minDate] input binding to disable past dates, and [markDisabled] input binding to disable the dynamic list of dates

<input class="form-control" ngbDatepicker [minDate]="minDate"  [markDisabled]="markDisabled" (click)="datePicker.toggle()" #datePicker="ngbDatepicker" placeholder="yyyy-mm-dd">
wentjun
  • 40,384
  • 10
  • 95
  • 107