Home > Software design >  Angular ngbdatepicker get displayed month startDate and endDate
Angular ngbdatepicker get displayed month startDate and endDate

Time:12-13

I am using ngbdatepicker. I want to get whichever month that is displayed currently its startDate and endDate. Suppose if I am seeing january so get 1-jan and 30-jan and if I am seeing february than 1-feb and 28-feb.

And both the dates should change as I go through different months.

How can we get that? P.S I am new to angular.

code -

     <ngb-datepicker
          #dp
          [(ngModel)]="model"
          [minDate]="minDate"
          [maxDate]="{ year: 2099, month: 12, day: 31 }"
          [ngModelOptions]="{ standalone: true }"
          (navigate)="date = $event.next"
          [markDisabled]="isDisabled"
          [ngClass]="{'enabledCh' : isDisabled}"
          (dateSelect)="select($event)"
          [dayTemplate]="customDay"
        >
        </ngb-datepicker>

<ng-template
      #customDay
      let-date
      let-currentMonth="currentMonth"
      let-selected="selected"
      let-disabled="disabled"
      let-focused="focused"
    >
      <span
        
        [class.weekend]="hasTask(date)"
        [class.hidden]="date.month !== currentMonth"
        [class.text-muted]="disabled"
      >
        {{ date.day }}
      </span>
    </ng-template>

CodePudding user response:

If your purpose that you want to hidden other days in show ngb datepicker I propose you use:

outsideDays = hidden

in ngb-datepicker tag.

CodePudding user response:

I got my answer using (navigate) event. If anyone else also have any problem can refer to this.Thanks.

navigate(e) {
     this.endDate = new Date(e.year, e.month, 0);
   this.startDate = new Date(e.year, e.month - 1, 1);
  }
  • Related