Why does ngbDate picker Month & Date selection not come in Angular version 20?

Question

I'm using Angular version 20. Month and year selection are missing. I have tried more methods, however I am still facing issues.

Imports: CommonModule, FormsModule, ReactiveFormsModule, NgScrollbarModule, CardComponent, MaterialModules,NgbDatepickerModule, NgbModule

(https://i.sstatic.net/7oZaPyBe.png)

<div class="row p-t-25">
  <div class="col-12">
    <app-card cardTitle="Hello card">
      <form #userlogin="ngForm">
        <div class="row">
          <div class="col">
            <div class="form-group">
              <label class="float-label"><span class="red">*</span>From Date</label>
              <div class="input-group py-2">
                <input
                class="form-control"
                placeholder="yyyy-mm-dd"
                name="fromDate"
                [(ngModel)]="formData.fromDate"
                ngbDatepicker
                #d2="ngbDatepicker"
                [navigation]="'select'"
              />
              <button class="btn btn-outline-secondary bi bi-calendar3" type="button" (click)="d2.toggle()">
                📅
              </button>

             </div>
            </div>
          </div>
          <div class="col">
            <div class="form-group">
              <label class="float-label"><span class="red">*</span>To Date</label>
              <div class="input-group py-2">
                <input
                  class="form-control"
                  placeholder="yyyy-mm-dd"
                  name="dp"

                  [(ngModel)]="formData.toDate"
                  ngbDatepicker
                  #d="ngbDatepicker"
                />
                <button class="btn btn-outline-secondary bi bi-calendar3" (click)="d.toggle()" type="button"> 📅</button>
            </div>
            </div>
          </div>

        </div>
        <hr class="mt-4" style="color: darkgrey;">

      </form>
    </app-card>
  </div>
</div>

please share a stackblitz with the issue happening, steps to replicate and expected output from the stackblitz, kindly use the stackblitz examples provided in the ngb website — Naren Murali
– Naren Murali, Commented Sep 17 at 10:41
pay attention to the version of ng-bootstrap and version of bootstrap.css (you can see the correct versions in the docs, e.g. for Angular 20 you need ng-bootstrap 19.x.x and bootstrap 5.3.6. But possible your app-card has a css overflow that makes you can not see the "months" (using F12 you can see if the header is or not) — Eliseo
– Eliseo, Commented Sep 17 at 10:54

Brian Davis · Accepted Answer · 2025-09-25 14:47:03Z

0

My polyfills got dropped when I upgraded angular and they needed to get re-added to angular.json (specifically, it was the angular localize line)

"polyfills": [
              "zone.js",
              "@angular/localize/init"
            ],

Source:
https://stackoverflow.com/a/76100353/4172413

answered Sep 25 at 14:47

Brian Davis

8171 gold badge13 silver badges16 bronze badges

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

Collectives™ on Stack Overflow

Why does ngbDate picker Month & Date selection not come in Angular version 20?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related