Home AngularJs Angular 14 Bootstrap 5 Datepicker

Angular 14 Bootstrap 5 Datepicker

by Shahriar Sagor
Angular 14 Bootstrap 5 Datepicker

Hello Dev , today now in this tutorial, i will show you angular 14 bootstrap datepicker. From here you will learn how you can use bootstrap datepicker in angular 14. So in this post i will give you a simple example of angular 14 ng-bootstrap-datepicker. I can see the bootstrap datepicker in angular 14. Just need to follow bellow step for how to add bootstrap datepicker in angular 14. Here we know about Angular 14 Bootstrap 5 Datepicker .

Step 1: Create New App

We can easily create our angular app by using the bellow command:

ng new my-new-app
Step 2: Install Bootstrap 5

Now in this step, i will install bootstrap core package. so i can use the bootstrap css,. So let’s install by following command:

npm install bootstrap --save

Now, i have to include bootstrap css as like “node_modules/bootstrap/dist/css/bootstrap.min.css”. So let’s add it on the angular.json file.

angular.json

.....
    "styles": [
      "node_modules/bootstrap/dist/css/bootstrap.min.css",
      "src/styles.css"
    ],
.....
Step 3: Install Ng Bootstrap

Then now in this step, i will install Ng Bootstrap package. So i can use the bootstrap ui. Now let’s install by using the following command:

npm install --save @ng-bootstrap/ng-bootstrap
Step 4: Import Module

So in this step, i have to import NgbModule and FormsModule to app.module.ts file. So let’s import it as like as bellow:

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 { }
Step 5: Updated View File

Now here, i will updated our html file. i will create the simple bootstrap input fields for datepicker.

so let’s put the bellow code:

src/app/app.component.html

<h1>Angular 14 Bootstrap 5 Datepicker Example - CodingsPoint.com</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>
Step 4: Use Component ts File

Now i have to update my component.ts file here i will be write code of bootstrap datepicker model, so let’s update as like as bellow:

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:any;
  
  constructor() {}
    
}

Read Also: How To Implement Laravel 9 form validation ?

Thanks for read. I hope it help you. For more you can follow us on facebook

close

You may also like