Skip to main content

angular bootstrap - How to enable disable Datepicker

app.component.ts 

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

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


export class AppComponent {
  //model:NgbDateStruct;
  model:any;
  isDisabled:boolean = true;

  constructor(private calendar: NgbCalendar) {}

  onClick(){
    this.isDisabled = !this.isDisabled
  }
}
app.component.html 

<h4 style="padding-top:25px; padding-bottom:25px;">
  Angular Bootstrap - Enable Disable Datepicker
</h4>

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

<ngb-datepicker 
  #datePicker 
  [(ngModel)]="model"
  [disabled]="isDisabled">
</ngb-datepicker>
<br/><br/>

<button (click)="onClick()">
  {{isDisabled? 'Enable Datepicker' : 'Disable Datepicker'}}
</button>
More Angular tutorials
Labels: