CODEWITHSUNDEEP
angular
Tim
Tim

Reputation: 471

NGB-Datepicker - Disabling dates based on state

I have a date range picker and I'm trying to set weekends disabled, but only if the app is in a certain state. To simplify this, in my example I have a property datesDisabled set to true initially, with a button that toggles the boolean.

I'd like for the dates to be enabled when this is false, but I'm unsure how to do this. I found the disable code on the ng-bootstrap site for disabling dates and this works fine, but being new at Angular I'm unsure how to have this take effect only in a certain state rather than disabling the days completely when the app starts.

StackBlitz: https://stackblitz.com/edit/angular-so3wkd

Relevant part of my component:

export class NgbdDatepickerRange {

  hoveredDate: NgbDate;

  fromDate: NgbDate;
  toDate: NgbDate;

  datesDisabled: true;

  constructor(calendar: NgbCalendar, config: NgbDatepickerConfig) {
    this.fromDate = calendar.getToday();
    this.toDate = calendar.getNext(calendar.getToday(), 'd', 10);
    config.markDisabled = (date: NgbDate) => calendar.getWeekday(date) >= 6;
  }

Upvotes: 0

Views: 4726

Answers (2)

Ajinkya Bapat
Ajinkya Bapat

Reputation: 61

First, create a model.ts file. Inside define:

minDate: date.getDate()

Then in your date-time picker.ts file write the function like below:

writeValue(newModel: string) {
        if (newModel) {
            this.datetime = Object.assign(this.datetime, DateTimeModel.fromLocalString(newModel));
            this.dateString = newModel;
            this.setDateStringModel();
            this.minDate=Object.assign(this.minDate,DateTimeModel.fromLocalString(newModel));
        } else {
            this.datetime = new DateTimeModel();
        }
    }

Finally, bind minDate in html file as

[minDate]="minDate"

It works. All the best.

Upvotes: 0

yougeen
yougeen

Reputation: 168

Please see my solution: Stackblitz

<ngb-datepicker #dp .... [markDisabled]="markDisabled">

You simply define a variable for markDisabled inside your HTML.

The markDisabled will be triggerd by a function disableDays():

disableDays() {
  if(this.datesDisabled) {
    this.datesDisabled = false;
    this.markDisabled = (date: NgbDate) => { return false };
  } else {
    this.datesDisabled = true;
    this.markDisabled = (date: NgbDate) => { return this.calendar.getWeekday(date) >= 6 };
  }  
}

Upvotes: 1

Related Questions