• Angular, ngx-bootstrap, Datepicker
• Développement front-end

Installer Bootstrap

//install Bootstrap 4
npm install bootstrap --save

// install ngx-bootstrap package
npm install ngx-bootstrap --save
                    

Sur le fichier angular.json ajouter ce code

"styles": [
     "node_modules/bootstrap/dist/css/bootstrap.min.css",
     "node_modules/ngx-bootstrap/datepicker/bs-datepicker.css",
     "src/styles.css"
]
                    

Sur le fichier app.module.ts ajouter ce code

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
// Datepicker module
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    BsDatepickerModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }
                    

Sur le composant .html ajouter ce code

[bsConfig]="{ isAnimated: true }" Avec animation

[bsConfig]="{ adaptivePosition: true }" Adaptation de position

[bsConfig]="{ dateInputFormat: 'YYYY-MM-DD' }" Format de la date

<div class="container">
  <div class="row">
    <div class="col-md-12 col-12 col-lg-4 form-group">
      <input 
        type="text"
        placeholder="Datepicker"
        class="form-control"
        [bsConfig]="{ adaptivePosition: true,isAnimated: true,dateInputFormat: 'YYYY-MM-DD' }"
        bsDatepicker>
    </div>
    <div class="col-md-12 col-12 col-lg-4 form-group">
      <input 
        type="text"
        placeholder="Daterangepicker"
        class="form-control"
        [bsConfig]="{ adaptivePosition: true,isAnimated: true,dateInputFormat: 'YYYY-MM-DD' }"
        bsDaterangepicker>
    </div>
  </div>
</div>