Hello Devs,

In this tutorial, we are going to learn about angular 10 ng-bootstrap-datepicker.

Ng Bootstrap is developed from bootstrap and they provide all bootstrap 3 and bootstrap 4 native Angular 10 directives like model, pagination, datepicker, buttons.

Follow this step by step guide given below:




Create New App

ng new my-new-app



Install Bootstrap 4

npm install bootstrap --save

angular.json

.....

    "styles": [

      "node_modules/bootstrap/dist/css/bootstrap.min.css",

      "src/styles.css"

    ],

.....



Install Ng Bootstrap

npm install --save @ng-bootstrap/ng-bootstrap



Import Module

src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

  

import { AppComponent } from './app.component';

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

import { FormsModule } from '@angular/forms';

  

@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [

    BrowserModule, 

    NgbModule,

    FormsModule

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }



Updated View File

src/app/app.component.html

<h1>Angular 10 Bootstrap 4 Datepicker Example - Rathorji.in</h1>

  

<form class="form-inline">

  <div class="form-group">

    <div class="input-group">

      <input class="form-control" placeholder="yyyy-mm-dd"

             name="dp" [(ngModel)]="model" ngbDatepicker #d="ngbDatepicker">

      <div class="input-group-append">

        <button class="btn btn-outline-secondary calendar" (click)="d.toggle()" type="button"></button>

      </div>

    </div>

  </div>

</form>

   

<hr/>

<pre>Model: {{ model | json }}</pre>



Use Component ts File

src/app/app.component.ts

import { Component } from '@angular/core';

  

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent {

  title = 'appBootstrap';

  

  model;

  

  constructor() {}

    

}


Run this command:

ng serve


I hope this example helps you.