Angular Datepicker

The Angular datepicker is tied to a standard form input field. In order the Angular datepicker to work, focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay. Choose a date, click elsewhere on the page (blur the input), or hit the Esc key to close. If a date is chosen, feedback is shown as the input’s value.
Keep reading our Angular Datepicker examples and learn how to use this plugin.

Single datepicker

<div class="form-group">
  <div class="input-group input-group-alternative">
    <div class="input-group-prepend">
      <span class="input-group-text"><i class="ni ni-calendar-grid-58"></i></span>
    </div>
    <input type="text"
      placeholder="Datepicker"
      class="form-control"
      bsDatepicker
      [bsValue]="bsValue"
      [bsConfig]="{ isAnimated: true, containerClass: 'theme-red' }">
  </div>  
</div>

Range datepicker

<div class="form-group">
  <div class="input-group">
    <div class="input-group-prepend">
      <span class="input-group-text"><i class="ni ni-calendar-grid-58"></i></span>
    </div>
    <input type="text"
      class="form-control"
      bsDaterangepicker
      [(ngModel)]="bsRangeValue"
      [bsConfig]="{ isAnimated: true, containerClass: 'theme-red' }"
      name="bsDaterangepicker">
  </div>
</div>

<!-- Typescript -->

bsValue = new Date();
bsRangeValue: Date[];
maxDate = new Date();
constructor() {
  this.maxDate.setDate(this.maxDate.getDate() + 7);
  this.bsRangeValue = [this.bsValue, this.maxDate];
}
ngOnInit() {}