1

I have been trying to disable weekends in my ngb-datepicker. I did not get a the desired output yet. Please see my code:

<ngb-datepicker #dp  [displayMonths]="1" [dayTemplate]="t"
      [minDate]="{year: 2018, month: 12, day: 1}"
      [maxDate]="{year: 2018, month: 12, day: 31}" 
      [markDisabled]="isDisabled">
    </ngb-datepicker>

        <ng-template #t let-date="date" let-focused="focused">
          <span class="custom-day" (click)="onDateSelection($event,date)"
                [class.focused]="focused"
                [class.range]="isFrom(date) || isTo(date) || isInside(date) || isHovered(date)"
                [class.faded]="isHovered(date) || isInside(date)"
                [class.selected]="isDateSelected(date)"
                [class.halfDay]="chkLeaveType(date,'half')"
                [class.fullDay]="chkLeaveType(date,'full')"
                [class.holiDay]="chkLeaveType(date,'holiDay')"
                (mouseenter)="hoveredDate = date"
                (mouseleave)="hoveredDate = null">
            {{ date.day }}
          </span>
        </ng-template>


     isDisabled(date: NgbDateStruct) {
        const d = new Date(date.year, date.month - 1, date.day);
        console.log(d.getDay() === 0);
        return  d.getDay() === 0 || d.getDay() === 6;
      }

isDisabled function is being executed and returning appropriate values but I could not see the disabled effect in my calender. Can anybody tell me what is wrong in my code ? Thanks in advance

veben
  • 19,637
  • 14
  • 60
  • 80
ebin
  • 191
  • 2
  • 5
  • You have a custom template for displaying days, but this template doesn't care whether the day is disabled or not. See https://ng-bootstrap.github.io/#/components/datepicker/examples#customday for an example of a custom template which does honot the disabled setting. – JB Nizet Dec 03 '18 at 08:37
  • @ebin, you can use getWeekday to get the week day https://ng-bootstrap.github.io/#/components/datepicker/api#NgbCalendar – Eliseo Dec 03 '18 at 08:41

1 Answers1

0

Just add the attribute "disabled" into the tag. No value required. Like this:

<ngb-datepicker #dp  [displayMonths]="1" [dayTemplate]="t"
  [minDate]="{year: 2018, month: 12, day: 1}"
  [maxDate]="{year: 2018, month: 12, day: 31}" 
  disabled ></ngb-datepicker>
rares
  • 1
  • 2