CODEWITHSUNDEEP
datepickerangular-ui-bootstrapbootstrap-datepicker
Andrea
Andrea

Reputation: 67

Header of datepicker in bootstrap is not visible

I have website created as an angular app that has a bootstrap datepicker. The problem is that the header of this datepicker is not visible - there're no arrows or a spinner to choose a month and a year. The code in html look like this (I just want the header to be visible, I don't cate about its functionality at this point):

<div class="btn-group mb-3 mr-3  ">
  <input class="form-control "
          name="datepicker"
          ngbDatepicker              
          #datepicker="ngbDatepicker"
          [autoClose]="'outside'"
          (dateSelect)="onDateSelection($event)"
          [displayMonths]="2"          
          [dayTemplate]="t"
          outsideDays="hidden"
          [startDate]="fromDate"                  
          [placement]="'bottom'"
          type="hidden">
  <ng-template #t let-date let-focused="focused">

  <span class="custom-day"
        [class.focused]="focused"
        [class.range]="isRange(date)"
        [class.faded]="isHovered(date) || isInside(date)"
        (mouseenter)="hoveredDate = date"
        (mouseleave)="hoveredDate = null">
    {{ date.day }}
  </span>

  </ng-template>

  <div class="input-group-append ">
    <button class="btn btn-outline-dark " (click)="datepicker.toggle()" type="button" placement="bottom" ngbTooltip="{{'raports_by_date' | translate }}"><span class="fa fa-calendar"></span></button>
  </div>
  <button type="button" class="btn btn-dark no-click" *ngIf="toDate" > {{fromDate.day}}/{{fromDate.month}}/{{fromDate.year}}</button>
  <button type="button" class="btn btn-dark btn-sm no-click" *ngIf="toDate" >-</button>
  <button type="button" class="btn btn-dark no-click" *ngIf="toDate" >{{toDate.day}}/{{toDate.month}}/{{toDate.year}} </button>
  <button type="button" class="btn btn-dark no-click" *ngIf="!toDate && fromDate" >{{fromDate.day}}/{{fromDate.month}}/{{fromDate.year}} </button>
</div>

And the result I get in a browser is: enter image description here

I'm new to web applications programming and I've been working on this datepicker for the last two days. I have tried following examples at: https://ng-bootstrap.github.io/#/components/datepicker/examples#adapter but to no success.

Upvotes: 2

Views: 1547

Answers (1)

Muhammad Noor Siddiqui
Muhammad Noor Siddiqui

Reputation: 71

You need to make sure you have the @angular/localize package first:

if (!not) {

npm install @angular/localize --save

Then, import '@angular/localize/init' in your polyfills.ts file just like the error says

OR

ng add @angular/localize

It will take care of it automatically

}

Upvotes: 7

Related Questions