how to disable existing dates from ngbdatepicker angular

Question

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?

Eliseo · Accepted Answer · 2019-02-26 09:07:13Z

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

edited Feb 26, 2019 at 9:07

answered Feb 26, 2019 at 8:04

Eliseo

58.9k4 gold badges39 silver badges82 bronze badges

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

Comments

Jeyam Prakash · Accepted Answer · 2019-02-26 05:51:17Z

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

answered Feb 26, 2019 at 5:51

Jeyam Prakash

2411 silver badge7 bronze badges

1 Comment

cwillinx Over a year ago

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.

wentjun · Accepted Answer · 2019-02-26 05:59:24Z

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

edited Feb 26, 2019 at 5:59

answered Feb 26, 2019 at 4:54

wentjun

42.8k10 gold badges108 silver badges116 bronze badges

3 Comments

Soni Silalahi Over a year ago

no, i want to disable existing date. i already done with disabling past dates

wentjun Over a year ago

GImme a few minutes, I am updating my ans. Sorry about that

wentjun Over a year ago

I have updated my answer, but just to clarify, are the dates on your list in Date object format? Or is it in some other format, such as string?

Luismiguel Ortiz · Accepted Answer · 2024-02-19 21:23:15Z

0

This Works for my:

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



markDisabled(date: NgbDateStruct) {
const dateFixed = new Date(date.year, date.month-1 , date.day);
let today = new Date();

let ifMinusToday = () => {
  if(dateFixed.getFullYear() < today.getFullYear())
    return true;
  else if(dateFixed.getMonth() < today.getMonth())
    return true;
  else if(dateFixed.getMonth() == today.getMonth() && dateFixed.getDate() < today.getDate())
    return true;
    
  return false;
}

return ifMinusToday();

}

answered Feb 19, 2024 at 21:23

Luismiguel Ortiz

1

Collectives™ on Stack Overflow

how to disable existing dates from ngbdatepicker angular

4 Answers 4

Comments

1 Comment

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related