Skip to main content

angular bootstrap - How to use Datepicker

app.component.ts 

import { Component } from '@angular/core';
import { NgbCalendar } from '@ng-bootstrap/ng-bootstrap';
import { NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})


export class AppComponent {
  model: NgbDateStruct = this.calendar.getToday();

  constructor(private calendar: NgbCalendar) {}
}
app.component.html 

<h4 style="padding-top:25px; padding-bottom:25px;">
  Angular Bootstrap - How to use Datepicker
</h4>

<h5><b>Selected Date:</b></h5>
<h5>{{ model | json }}</h5>
<br/>

<ngb-datepicker 
  #datePicker 
  [(ngModel)]="model">
</ngb-datepicker>
app.module.ts 

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

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

// for angular bootstrap date picker
import {FormsModule} from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgbModule, // for angular bootstrap
    FormsModule // for angular bootstrap date picker
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
More Angular tutorials
Labels: