How to implement bootstrap date picker?

Question

I have date picker plugin in my packages, when I implement, I am able to see the calender. How can I see the calender .

This is what I have tried

                  <input
                    type="text"
                    class="form-control"
                    [(ngModel)]="selectedToDate"
                    [bsConfig]="{
                      dateInputFormat: 'DD-MMM-YYYY',
                    }"
                    [minDate]="selectedFromDate"
                    [maxDate]="maxDate"
                    name="toDate"
                    bsDatepicker
                  />

I have gone through different forums and followed the same but didnt help, please assist me.

try change type to "date"

likquietly
– likquietly

2023-08-07 10:49:56 +00:00
Commented Aug 7, 2023 at 10:49 — likquietly
– likquietly, Commented Aug 7, 2023 at 10:49
do you have any errors on your console ?

DEV
– DEV

2023-08-07 10:55:16 +00:00
Commented Aug 7, 2023 at 10:55 — DEV
– DEV, Commented Aug 7, 2023 at 10:55

Rahul Gangarde · Accepted Answer · 2024-09-12 07:13:42Z

0

Install ng-bootstrap in angular

npm i ng-bootstrap

datepicker.html
    <div class="input-group">
        <input
            class="form-control"
            placeholder="yyyy-mm-dd"
            name="dp"
            [(ngModel)]="model"
            ngbDatepicker
            #d="ngbDatepicker"
        />
        <button class="btn btn-outline-secondary bi bi-calendar3" 
         (click)="d.toggle()" type="button"></button>
      </div>

datepicker.ts
    import { Component } from '@angular/core';
    import { NgbAlertModule, NgbDatepickerModule, NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';
    import { FormsModule } from '@angular/forms';
    import { JsonPipe } from '@angular/common';
    
    @Component({
        selector: 'ngbd-datepicker-popup',
        standalone: true,
        imports: [NgbDatepickerModule, NgbAlertModule, FormsModule, JsonPipe],
        templateUrl: './datepicker-popup.html',
    })
    export class DatePicker {
        model: NgbDateStruct;
    }

edited Sep 12, 2024 at 7:13

answered Sep 12, 2024 at 7:11

Rahul Gangarde

112 bronze badges

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

1 Comment

Jeremy Caney Over a year ago

Thank you for contributing to the Stack Overflow community. This may be a correct answer, but it’d be really useful to provide additional explanation of your code so developers can understand your reasoning. This is especially useful for new developers who aren’t as familiar with the syntax or struggling to understand the concepts. Would you kindly edit your answer to include additional details for the benefit of the community?

Collectives™ on Stack Overflow

How to implement bootstrap date picker?

1 Answer 1

npm i ng-bootstrap

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

npm i ng-bootstrap

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related