Angular 7|8|9 Bootstrap 4 | Date-picker and Time-picker Tutorial

Bootstrap is a pack of beautiful ready to plug UI components and also helps mobile-first application development. Bootstrap with Angular can make more powerful apps with already tried and tested web UI components that are fully responsive and supportive for any screen size.

With ng-bootstrap‘s latest version 4.4.1 we can develop an application in Angular’s latest version 9. In this post we will get to know to include Bootstrap in Angular 7 project and also implement Datepicker and Time Picker Bootstrap component is a new Angular Project.

Let’s begin!

Also Check: Angular 8 Bootstrap 4 | Modal Tutorial By Example

Create New Angular Project Using CLI

First, we will create a new Angular project using Angular CLI. Make sure you have installed the latest version on Angular CLI by running following command

Create a new Angular project then select few options asked. We have not selected Angular routing to make this demo easier.

Change directory to point our project

If you have Visual Studio Code installed then run the following command to open the project in VS Code directly.


Install Bootstrap in Angular Project

Let’s install Bootstrap by running following the NPM command. This will install the latest bootstrap version ( Current is 4.4.1 )

ng-bootstrap includes UI components only, so for adding styling to these components we need to include CSS styling file in the index.html at Angular project root


Import NgbModule ( Bootstrap module ) & FormsModule ( for Angular as we will use [(ngModel)] ) in the app.module.ts file


Add Datepicker Bootstrap Component in Application

Bootstrap package @ng-bootstrap/ng-bootstrap includes all types on UI components separately, so whichever is required we can simply import only that component. For example, here we need only the Datepicker component so we will import it in our component.

Simple datepicker

Datepicker in a popup


You can check more working examples here

Bootstrap Timepicker in Angular Application

Similarly, for Timepicker, we need to import the time picker module in our component to use it


Check more examples for Timepicker here

Bootstrap is already loaded with UI widgets which are very simple and easy to use with fully-featured options, so by following the above steps, you can add any type of Bootstrap widget in Angular’s latest version.


Leave a Reply

2 Comment threads
1 Thread replies
Most reacted comment
Hottest comment thread
3 Comment authors
Vibhu KumarJolly.exeSeba Recent comment authors
newest oldest most voted
Notify of

The popup doesn’t work. There is no “exportAs method”, so you can not assign it like ” #d=”ngbDatepicker””, it crashes

Vibhu Kumar

I was looking for a date picker with no Material look and feel. And I finally got that. Thanks for sharing userfull tutorial.