Best Datepicker for Angular 4/5/6 with Bootstrap projects

Best Datepicker for Angular 4 with Bootstrap projects:

I am so tired after spending lot of hours, lot of tries for a good date picker for my current angular 4 project. Problem I faced is, there is a lot of datepicker available and even all are with angular-cli, but few are not having proper documentation, few are not fully customizable, few are not working all the time/all the scenario and finally I am proceeding with ngbootstrap datepicker only.

Of course, I could not get much help for ngbootstrap as well from online or QA forums like stackoverflow, but I personally feel it is more stable than other datepickers availble and documentation is comparatively good. Also it is updated with bootstrap 4!.

Let’s start with the datepicker!

Here you will learn,

1. How to setup bootstrap datepicker in angular 4
2. How to get the date
3. How to set the date

 

Step 1: Ensure you have installed ng-bootstrap.

If not install or setup using the below github link instruction.

GITHUB Ng-Bootstrap

It’s actually a two step simple setup only.

1. ng-bootstrap install command:

[html]
npm install –save @ng-bootstrap/ng-bootstrap
[/html]

2. Import the NgbModule to your angular module.

[html]
import {NgbModule} from ‘@ng-bootstrap/ng-bootstrap’;

@NgModule({
declarations: [AppComponent, …],
imports: [NgbModule.forRoot(), …],
bootstrap: [AppComponent]
})
export class AppModule {
}
[/html]

 

Step 2: Typescript or component file

[html]
import { NgbDateStruct } from ‘@ng-bootstrap/ng-bootstrap/datepicker/ngb-date-struct’;

export class MyComponent{
myDate:NgbDateStruct;

}
[/html]

 

Step 3: Import NgbDateStruct to your component, as you want to give the date in this format only.

[html]
import { NgbDateStruct } from ‘@ng-bootstrap/ng-bootstrap/datepicker/ngb-date-struct’;
[/html]

 

Step 4: HTML or template file

[html]

[/html]

 

Step 5: Setting the date to ngbdatepicker

[html]
setDate(){
this.myDate = {year: 1988, month: 12, day: 12};
}
[/html]

 

Step 6: Getting/Printing the date:

[html]
printDate(){
console.log(JSON.stringify(this.startDate.day)+”-“+JSON.stringify(this.startDate.month)+”-“+JSON.stringify(this.startDate.year));
// prints 12-12-1988
}
[/html]

 

 

Feel free to add your comments below.