• Home
  • /components
  • /datepicker

Datepicker component on github

Datepicker is a highly configurable component that adds datepicker functionality to your pages. You can customize the date format and language, restrict the selectable date ranges.

The easiest way to add the datepicker component to your app (will be added to the root module)

Basic

#

Note: If you installed ngx-bootstrap not via ng add command, you will need to perform a several actions

Notable change is additional css for it "/datepicker/bs-datepicker.css"

There are two ways of adding css:

  • Load it from CDN. Add <link rel="stylesheet" href="https://unpkg.com/ngx-bootstrap/datepicker/bs-datepicker.css"> to your index.html
  • Load it from dist/ngx-bootstrap/datepicker/bs-datepicker.css via package bundler like Angular CLI, if you're using one. 

<div class="row">
  <div class="col-xs-12 col-12 col-md-4 form-group mb-3">
    <input type="text"
           placeholder="Datepicker"
           class="form-control"
           bsDatepicker>
  </div>
  <div class="col-xs-12 col-12 col-md-4 form-group mb-3">
    <input type="text"
           placeholder="Daterangepicker"
           class="form-control"
           bsDaterangepicker>
  </div>
</div>

import { Component } from '@angular/core';

@Component({
  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'demo-datepicker-basic',
  templateUrl: './basic.html',
  standalone: false
})
export class DemoDatepickerBasicComponent {}

Inline

#

with initial state set by bsInlineValue property

<div class="row">
  <div class="pr-3 pb-3 pe-3 w-auto">
    <bs-datepicker-inline [bsValue]="bsInlineValue"></bs-datepicker-inline>
  </div>
  <div class="pr-3 pb-3 pe-3 w-auto">
    <bs-daterangepicker-inline [bsValue]="bsInlineRangeValue"></bs-daterangepicker-inline>
  </div>
</div>


import { Component } from '@angular/core';

@Component({
  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'demo-datepicker-inline',
  templateUrl: './inline-datepicker.component.html',
  standalone: false
})
export class DemoDatepickerInlineComponent {
  bsInlineValue = new Date();
  bsInlineRangeValue: Date[];
  maxDate = new Date();

  constructor() {
    this.maxDate.setDate(this.maxDate.getDate() + 7);
    this.bsInlineRangeValue = [this.bsInlineValue, this.maxDate];
  }
}

With animation

#

You can enable animation via isAnimated config option

<div class="row">
  <div class="col-xs-12 col-12 col-md-4 form-group mb-3">
    <input type="text"
           placeholder="Datepicker"
           class="form-control"
           bsDatepicker
           [bsConfig]="{ isAnimated: true }">
  </div>
  <div class="col-xs-12 col-12 col-md-4 form-group mb-3">
    <input type="text"
           placeholder="Daterangepicker"
           class="form-control"
           bsDaterangepicker
           [bsConfig]="{ isAnimated: true }">
  </div>
</div>

import { Component } from '@angular/core';

@Component({
  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'demo-datepicker-animated',
  templateUrl: './animated.html',
  standalone: false
})
export class DemoDatePickerAnimatedComponent {}

Adaptive position

#

You can enable adaptive position via adaptivePosition option in bsConfig

<div class="row">
  <div class="col-xs-12 col-12 col-md-4 form-group mb-3">
    <input type="text"
           placeholder="Datepicker"
           class="form-control"
           bsDatepicker
           [bsConfig]="{ adaptivePosition: true }">
  </div>
  <div class="col-xs-12 col-12 col-md-4 form-group mb-3">
    <input type="text"
           placeholder="Daterangepicker"
           class="form-control"
           bsDaterangepicker
           [bsConfig]="{ adaptivePosition: true }">
  </div>
</div>

import { Component } from '@angular/core';

@Component({
  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'demo-datepicker-adaptive-position',
  templateUrl: './adaptive-position.html',
  standalone: false
})
export class DemoDatePickerAdaptivePositionComponent {}

Initial state

#

bsValue property sets initial state in this example

ngModel property sets two-way data binding in this example

<p><code>bsValue</code> property sets initial state in this example</p>
<div class="row">
  <div class="col-xs-12 col-12 col-md-4 form-group mb-3">
    <input type="text"
           class="form-control"
           #dp="bsDatepicker"
           bsDatepicker
           [bsValue]="bsValue">
  </div>
  <div class="col-xs-12 col-12 col-md-3 form-group mb-3">
    <button class="btn btn-success" (click)="dp.toggle()" [attr.aria-expanded]="dp.isOpen" type="button">Date Picker</button>
  </div>
</div>

<p><code>ngModel</code> property sets two-way data binding in this example</p>
<div class="row">
  <div class="col-xs-12 col-12 col-md-4 form-group mb-3">
    <input class="form-control" #drp="bsDaterangepicker" bsDaterangepicker [(ngModel)]="bsRangeValue">
  </div>
  <div class="col-xs-12 col-12 col-md-3 form-group mb-3">
    <button class="btn btn-success" (click)="drp.toggle()" [attr.aria-expanded]="drp.isOpen" type="button">Date Range Picker</button>
  </div>
</div>

import { Component } from '@angular/core';

@Component({
  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'demo-datepicker-date-initial-state',
  templateUrl: './date-initial-state.html',
  standalone: false
})
export class DemoDatepickerDateInitialStateComponent {
  bsValue = new Date();
  bsRangeValue: Date[];
  maxDate = new Date();
  constructor() {
    this.maxDate.setDate(this.maxDate.getDate() + 7);
    this.bsRangeValue = [this.bsValue, this.maxDate];
  }
}

Custom date format

#

You can easily change the date format by specifying the dateInputFormat in [bsConfig]

To set your own date format you can use variety of formats provided by moment.js

The following examples show how to use several date formats inside a form:

  • YYYY-MM-DD
  • MM/DD/YYYY
  • MMMM Do YYYY,h:mm:ss a



<form [formGroup]="form">
  <div class="row">
    <div class="col-xs-12 col-md-5 col-lg-4 form-group mb-3">
      <input
        class="form-control"
        #datepickerYMD="bsDatepicker"
        bsDatepicker
        formControlName="dateYMD"
        [bsConfig]="{ dateInputFormat: 'YYYY-MM-DD' }">
    </div>
    <div class="col-xs-12 col-12 col-md-3 form-group mb-3">
      <button class="btn btn-success" (click)="datepickerYMD.toggle()" [attr.aria-expanded]="datepickerYMD.isOpen" type="button">Date Picker</button>
    </div>
  </div>
  <br>

  <div class="row">
    <div class="col-xs-12 col-md-5 col-lg-4 form-group mb-3">
      <input
        class="form-control"
        #datepickerMDY="bsDatepicker"
        bsDatepicker
        formControlName="dateMDY"
        [bsConfig]="{ dateInputFormat: 'MM/DD/YYYY' }">
    </div>
    <div class="col-xs-12 col-12 col-md-3 form-group mb-3">
      <button class="btn btn-success" (click)="datepickerMDY.toggle()" [attr.aria-expanded]="datepickerMDY.isOpen" type="button">Date Picker</button>
    </div>
  </div>
  <br>

  <div class="row">
    <div class="col-xs-12 col-md-5 col-lg-4 form-group mb-3">
      <input
        class="form-control"
        #datepickerFull="bsDatepicker"
        bsDatepicker
        formControlName="dateFull"
        [bsConfig]="{ dateInputFormat: 'MMMM Do YYYY, h:mm:ss a' }">
    </div>
    <div class="col-xs-12 col-12 col-md-3 form-group mb-3">
      <button class="btn btn-success" (click)="datepickerFull.toggle()" [attr.aria-expanded]="datepickerFull.isOpen" type="button">Date Picker</button>
    </div>
  </div>

  <div class="row">
    <div class="col-xs-12 col-md-5 col-lg-4 form-group mb-3">
      <input type="text"
        class="form-control"
        formControlName="dateRange"
        #daterangepicker="bsDaterangepicker"
        bsDaterangepicker
        [bsConfig]="{ rangeInputFormat : 'MMMM Do YYYY, h:mm:ss a', dateInputFormat: 'MMMM Do YYYY, h:mm:ss a', showWeekNumbers: false }">
    </div>
    <div class="col-xs-12 col-12 col-md-3 form-group mb-3">
      <button class="btn btn-success" (click)="daterangepicker.toggle()" [attr.aria-expanded]="daterangepicker.isOpen" type="button">Date Range Picker</button>
    </div>
  </div>
</form>

import { Component } from '@angular/core';
import { UntypedFormControl, UntypedFormGroup } from '@angular/forms';

@Component({
  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'demo-date-picker-custom-format',
  templateUrl: './custom-format.html',
  standalone: false
})
export class DemoDatePickerCustomFormatComponent {
  currentDate = new Date();

  form = new UntypedFormGroup({
    dateYMD: new UntypedFormControl(new Date()),
    dateFull: new UntypedFormControl(new Date()),
    dateMDY: new UntypedFormControl(new Date()),
    dateRange: new UntypedFormControl([
      new Date(),
      new Date(this.currentDate.setDate(this.currentDate.getDate() + 7))
    ])
  });
}

Hide on scroll

#

Hide the datepicker on page scroll.


<div class="row">
  <div class="col-xs-12 col-12 col-md-4 form-group mb-3">
    <input
      placeholder="Datepicker"
      class="form-control"
      #dp="bsDatepicker"
      bsDatepicker>
  </div>
  <div class="col-xs-12 col-12 col-md-3 form-group mb-3">
    <button class="btn btn-success" (click)="dp.toggle()" [attr.aria-expanded]="dp.isOpen" type="button">Date Picker</button>
  </div>
</div>
<br>

import { Component, HostListener, ViewChild } from '@angular/core';
import { BsDatepickerDirective } from 'ngx-bootstrap/datepicker';

@Component({
  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'demo-date-picker-hide-on-scroll',
  templateUrl: './hide-on-scroll.html',
  standalone: false
})
export class DemoDatepickerHideOnScrollComponent {
  @ViewChild(BsDatepickerDirective, { static: false }) datepicker?: BsDatepickerDirective;

  @HostListener('window:scroll')
  onScrollEvent() {
    this.datepicker?.hide();
  }
}

Themes

#

Datepicker comes with some default color schemes. You can change it by manipulating containerClass property in bsConfig object

There are 6 color schemes: theme-default, theme-green, theme-blue, theme-dark-blue, theme-red, theme-orange


<div class="row">
  <div class="col-xs-12 col-12 col-md-4 col-lg-4 form-group mb-3">
    <select
      class="custom-select form-control from-select"
      [(ngModel)]="colorTheme" (ngModelChange)="applyTheme(dp);">
      <option value="theme-default">default</option>
      <option value="theme-green">green</option>
      <option value="theme-blue">blue</option>
      <option value="theme-dark-blue">dark-blue</option>
      <option value="theme-red">red</option>
      <option value="theme-orange">orange</option>
    </select>
  </div>

  <div class="col-xs-12 col-12 col-md-5 col-lg-5 form-group mb-3">
    <div class="form-group mb-3">
      <div class="input-group">
        <input type="text" class="form-control" bsDatepicker #dp="bsDatepicker" [bsConfig]="bsConfig">
        <div class="input-group-btn">
          <button class="btn btn-success"
                  (click)="dp.show()"
                  [attr.aria-expanded]="dp.isOpen"
                  type="button">
            Open
          </button>
        </div>
      </div>
    </div>
  </div>
</div>
<br>



import { Component } from '@angular/core';
import { BsDatepickerConfig, BsDatepickerDirective } from 'ngx-bootstrap/datepicker';

@Component({
  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'demo-datepicker-color-theming',
  templateUrl: './color-theming.html',
  standalone: false
})
export class DemoDatepickerColorThemingComponent {
  colorTheme = 'theme-green';

  bsConfig?: Partial<BsDatepickerConfig>;

  applyTheme(pop: BsDatepickerDirective) {
    // create new object on each property change
    // so Angular can catch object reference change
    this.bsConfig = Object.assign({}, { containerClass: this.colorTheme });
    setTimeout(() => {
      pop.show();
    });
  }
}

Locales

#

Datepicker can use different locales.
It's possible to change a locale by calling use method of BsLocaleService, list of available locales is in dropdown below.

To use a different locale, you have to import it from ngx-bootstrap/chronos first, then define it in your @NgModule using function defineLocale

Example:

import { defineLocale } from 'ngx-bootstrap/chronos';
import { deLocale } from 'ngx-bootstrap/locale';
defineLocale('de', deLocale); 


<div class="row">
  <div class="col-xs-12 col-12 col-sm-3 col-md-3 col-lg-2 form-group mb-3">
    <select
      class="custom-select form-control from-select"
      [(ngModel)]="locale" (ngModelChange)="applyLocale(dp);">
      <option *ngFor="let loc of locales" [value]="loc">{{ loc }}</option>
    </select>
  </div>
  <div class="col-xs-12 col-12 col-sm-5 col-md-6 col-lg-4 form-group mb-3">
    <input placeholder="Datepicker" type="text" class="form-control" bsDatepicker #dp="bsDatepicker">
  </div>
  <div class="col-xs-12 col-12 col-sm-4 col-md-12 col-lg-4 form-group mb-3">
    <button class="btn btn-success" (click)="dp.show()" [attr.aria-expanded]="dp.isOpen" type="button">Date Picker</button>
  </div>
</div>
<br>

<div class="row">
  <div class="col-xs-12 col-12 col-sm-3 col-md-3 col-lg-2 form-group mb-3">
    <select
      class="custom-select form-control from-select"
      [(ngModel)]="locale" (ngModelChange)="applyLocale(dpr);">
      <option *ngFor="let loc of locales" [value]="loc">{{ loc }}</option>
    </select>
  </div>
  <div class="col-xs-12 col-12 col-sm-5 col-md-6 col-lg-4 form-group mb-3">
    <input placeholder="Daterangepicker" type="text" class="form-control" bsDaterangepicker #dpr="bsDaterangepicker">
  </div>
  <div class="col-xs-12 col-12 col-sm-4 col-md-12 col-lg-4 form-group mb-3">
    <button class="btn btn-success" (click)="dpr.show()" [attr.aria-expanded]="dpr.isOpen" type="button">Date Range Picker</button>
  </div>
</div>

import { Component } from '@angular/core';
import { BsDatepickerDirective, BsDaterangepickerDirective, BsLocaleService } from 'ngx-bootstrap/datepicker';
import { listLocales } from 'ngx-bootstrap/chronos';

@Component({
  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'demo-datepicker-change-locale',
  templateUrl: './change-locale.html',
  standalone: false
})
export class DemoDatepickerChangeLocaleComponent {
  locale = 'en';
  locales = listLocales();

  constructor(private localeService: BsLocaleService) {}

  applyLocale(pop: BsDatepickerDirective | BsDaterangepickerDirective) {
    this.localeService.use(this.locale);
    pop.hide();
    pop.show();
  }
}

Min-max

#

You can set min and max date of datepicker/daterangepicker using minDate and maxDate properties

In the following example minDate is set to yesterday and maxDate to the current day in the next week

<div class="row">
  <div class="col-xs-12 col-12 col-sm-6 col-md-4 form-group mb-3">
    <input class="form-control"
           placeholder="Datepicker"
           ngModel
           bsDatepicker
           [minDate]="minDate"
           [maxDate]="maxDate">
  </div>
  <div class="col-xs-12 col-12 col-sm-6 col-md-4 form-group mb-3">
    <input class="form-control"
           placeholder="Daterangepicker"
           ngModel
           bsDaterangepicker
           [minDate]="minDate"
           [maxDate]="maxDate">
  </div>
</div>



import { Component } from '@angular/core';

@Component({
  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'demo-datepicker-min-max',
  templateUrl: './min-max.component.html',
  standalone: false
})
export class DemoDatepickerMinMaxComponent {
  minDate: Date;
  maxDate: Date;

  constructor() {
    this.minDate = new Date();
    this.maxDate = new Date();
    this.minDate.setDate(this.minDate.getDate() - 1);
    this.maxDate.setDate(this.maxDate.getDate() + 7);
  }
}

Days disabled

#

You can set which days of the week should be disabled with daysDisabled

In the following example daysDisabled is set with an array which disabled Saturday and Sunday. Sunday is considered the first day of the week and thus has the value 0

Saturday and Sunday are not selectable

Saturday and Sunday are selectable

Saturday and Sunday are not selectable

Saturday and Sunday are selectable

<div class="row">
  <div class="col-xs-12 col-12 col-sm-6 col-md-5 form-group mb-3">
    <p>Saturday and Sunday are not selectable</p>
    <input class="form-control" placeholder="Datepicker" bsDatepicker [daysDisabled]="[6,0]">
  </div>
  <div class="col-xs-12 col-12 col-sm-6 col-md-5 form-group mb-3">
    <p>Saturday and Sunday are selectable</p>
    <input class="form-control" placeholder="Datepicker" bsDatepicker>
  </div>
</div>


<div class="row">
  <div class="col-xs-12 col-12 col-sm-6 col-md-5 form-group mb-3">
    <p>Saturday and Sunday are not selectable</p>
    <input class="form-control" placeholder="Daterangepicker" bsDaterangepicker [daysDisabled]="[6,0]">
  </div>
  <div class="col-xs-12 col-12 col-sm-6 col-md-5 form-group mb-3">
    <p>Saturday and Sunday are selectable</p>
    <input class="form-control" placeholder="Daterangepicker" bsDaterangepicker>
  </div>
</div>

import { Component } from '@angular/core';

@Component({
  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'demo-datepicker-daysdisabled',
  templateUrl: './disable-days.html',
  standalone: false
})
export class DemoDatepickerDaysDisabledComponent {}

Dates disabled

#

You can set which dates should be disabled with datesDisabled

In the following example datesDisabled is set with an array to disable 2020-02-05 and 2020-02-09.

NOTE: DO NOT USE this functionality with datesEnabled at the same time

<div class="row">
  <div class="col-xs-12 col-12 col-md-4 form-group mb-3">
    <input type="text"
           placeholder="Datepicker"
           class="form-control"
           bsDatepicker
           [datesDisabled]="disabledDates">
  </div>
  <div class="col-xs-12 col-12 col-md-4 form-group mb-3">
    <input type="text"
           placeholder="Daterangepicker"
           class="form-control"
           bsDaterangepicker
           [datesDisabled]="disabledDates">
  </div>
</div>

import { Component } from '@angular/core';

@Component({
  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'demo-datepicker-datesdisabled',
  templateUrl: './disable-dates.html',
  standalone: false
})
export class DemoDatepickerDatesDisabledComponent {
  disabledDates = [
    new Date('2020-02-05'),
    new Date('2020-02-09')
  ];
}

Dates enabled

#

You can set which dates should be enable with datesEnabled

In the following example datesEnabled is set with an array to enable 2020-02-06, 2020-02-08 and 2020-02-11. All other dates are disabled

NOTE: DO NOT USE this functionality with datesDisabled at the same time

<div class="row">
  <div class="col-xs-12 col-12 col-md-4 form-group mb-3">
    <input type="text"
           placeholder="Datepicker"
           class="form-control"
           bsDatepicker
           [datesEnabled]="enabledDates">
  </div>
  <div class="col-xs-12 col-12 col-md-4 form-group mb-3">
    <input type="text"
           placeholder="Daterangepicker"
           class="form-control"
           bsDaterangepicker
           [datesEnabled]="enabledDates">
  </div>
</div>

import { Component } from '@angular/core';

@Component({
  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'demo-datepicker-datesenabled',
  templateUrl: './enable-dates.html',
  standalone: false
})
export class DemoDatepickerDatesEnabledComponent {
  enabledDates = [
    new Date('2020-02-06'),
    new Date('2020-02-08'),
    new Date('2020-02-11'),
  ];
}

Display one month

#

You can configure, how many months you want to show for daterangepicker via displayMonths in BsDaterangepickerConfig.

With displayOneMonthRange you can show only one month for two cases

maxDate is today

minDate month is equal to maxDate month

<div class="row">
  <div class="col-xs-12 col-12 col-sm-6 col-md-6 form-group mb-3">
    <p><code>maxDate</code> is today</p>
    <input class="form-control"
           placeholder="Daterangepicker"
           ngModel
           bsDaterangepicker
           [maxDate]="today"
           [bsConfig]="{ dateInputFormat: 'DD-MM-YYYY',  displayOneMonthRange: true }">
  </div>
  <div class="col-xs-12 col-12 col-sm-6 col-md-6 form-group mb-3">
   <p><code>minDate</code> month is equal to <code>maxDate</code> month</p>
    <input class="form-control"
           placeholder="Daterangepicker"
           ngModel
           bsDaterangepicker
           [minDate]="minDate"
           [maxDate]="maxDate"
           [bsConfig]="{ dateInputFormat: 'DD-MM-YYYY',  displayOneMonthRange: true }">
  </div>
</div>

import { Component } from '@angular/core';

@Component({
  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'demo-daterangepicker-display-one-month',
  templateUrl: './display-one-month.html',
  standalone: false
})
// eslint-disable-next-line @angular-eslint/component-class-suffix
export class DemoDateRangePickerDisplayOneMonth {
  today: Date;
  maxDate: Date;
  minDate: Date;

  constructor() {
    this.today = new Date();
    this.minDate = new Date(this.today.getFullYear(), this.today.getMonth(), 2);
    this.maxDate = new Date(this.today.getFullYear(), this.today.getMonth(), 25);
  }
}

Min-mode

#

You can set min view mode of datepicker using minMode property

In the following example minMode is set to 'month'


<div class="row">
  <div class="col-xs-12 col-12 col-md-4 form-group mb-3">
    <input type="text"
           class="form-control"
           [bsConfig]="bsConfig"
           #dp="bsDatepicker"
           bsDatepicker [(bsValue)]="datePickerValue">
  </div>
  <div class="col-xs-12 col-12 col-md-3 form-group mb-3">
    <button class="btn btn-success" (click)="dp.toggle()" type="button">Date Picker</button>
  </div>
</div>

<div class="row">
  <div class="col-xs-12 col-12 col-md-4 form-group mb-3">
    <input type="text"
           class="form-control"
           [bsConfig]="bsConfig"
           #drp="bsDaterangepicker"
           bsDaterangepicker [(bsValue)]="dateRangePickerValue">
  </div>
  <div class="col-xs-12 col-12 col-md-3 form-group mb-3">
    <button class="btn btn-success" (click)="drp.toggle()" type="button">DateRange Picker</button>
  </div>
</div>
<br>

import { Component, OnInit } from '@angular/core';

import { BsDatepickerConfig, BsDatepickerViewMode } from 'ngx-bootstrap/datepicker';

@Component({
  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'demo-datepicker-min-mode',
  templateUrl: './min-mode.component.html',
  standalone: false
})
export class DemoDatepickerMinModeComponent implements OnInit {
  datePickerValue: Date = new Date(2020, 7);
  dateRangePickerValue?: (Date | undefined)[];
  range1: Date = new Date(2020, 5);
  range2: Date = new Date(2020, 8);
  minMode: BsDatepickerViewMode = 'month';

  bsConfig?: Partial<BsDatepickerConfig>;

  ngOnInit(): void {
    this.dateRangePickerValue = [this.range1, this.range2];
    this.bsConfig = Object.assign({}, {
      minMode : this.minMode
    });
  }
}

Disabled

#

If you want to disable datepicker's or daterangepicker's content set isDisabled property to true

<div class="row">
  <div class="col-xs-12 col-12 col-sm-6 col-md-4 form-group mb-3">
    <input class="form-control" placeholder="Datepicker" bsDatepicker #dp="bsDatepicker"
           [isDisabled]="isDisabled">
  </div>
  <div class="col-xs-12 col-12 col-sm-6 col-md-4 form-group mb-3">
    <input class="form-control" placeholder="Daterangepicker" bsDaterangepicker #dpr="bsDaterangepicker"
           [isDisabled]="isDisabled">
  </div>
  <div class="col-xs-12 col-12 col-sm-4 col-md-12 col-lg-4 form-group mb-3">
    <button class="btn btn-success" (click)="toggleDisabling()" type="button">Toggle disabling</button>
  </div>
</div>

import { Component } from '@angular/core';

@Component({
  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'demo-datepicker-disabled',
  templateUrl: './disabled.component.html',
  standalone: false
})
export class DemoDatepickerDisabledComponent {
  isDisabled = false;

  toggleDisabling(): void {
    this.isDisabled = !this.isDisabled;
  }
}

Custom today class

#

If you want to add custom class to current day datepicker's content set value to customTodayClass option in bsConfig

<div class="row">
  <div class="col-xs-12 col-12 col-md-4 form-group mb-3">
    <input type="text"
           placeholder="Datepicker"
           class="form-control"
           [bsConfig]="{ customTodayClass: 'custom-today-class' }"
           bsDatepicker>
  </div>
</div>

import { Component } from '@angular/core';

@Component({
  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'demo-datepicker-custom-today-class',
  templateUrl: './custom-today-class.component.html',
  standalone: false
})
export class DemoDatepickerCustomTodayClassComponent { }

Forms

#

Datepicker and daterangepicker can be used in forms. Keep in mind that value of ngModel is Date object for datepicker and array of 2 Date objects for daterangepicker


<div class="row">
  <div class="col-xs-12 col-12 col-sm-6 col-md-4 form-group mb-3">
    <input type="text" class="form-control" placeholder="Datepicker" bsDatepicker [(ngModel)]="datepickerModel" />
  </div>
  <div class="col-xs-12 col-12 col-sm-6 col-md-4 form-group mb-3">
    <input type="text" class="form-control" placeholder="Daterangepicker" bsDaterangepicker [(ngModel)]="daterangepickerModel" />
  </div>
</div>
<div class="row">
  <div class="col-xs-12 col-md-12">
    <pre class="code-preview">{{datepickerModel}}<br>{{daterangepickerModel}}</pre>
  </div>
</div>



import { Component } from '@angular/core';

@Component({
  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'demo-datepicker-forms',
  templateUrl: './forms.component.html',
  standalone: false
})
export class DemoDatepickerFormsComponent {
  datepickerModel?: Date;
  daterangepickerModel?: Date[];
}

Reactive forms

#

<form *ngIf="myForm" [formGroup]="myForm">
  <div class="row">
    <div class="col-xs-12 col-12 col-sm-6 col-md-4 form-group mb-3">
      <input type="text" class="form-control mb-3" placeholder="Datepicker" bsDatepicker formControlName="date" />
      <pre *ngIf="myForm?.value?.date" class="code-preview">{{myForm?.value?.date | date}}</pre>
    </div>
    <div class="col-xs-12 col-12 col-sm-6 col-md-4 form-group mb-3">
      <input type="text" class="form-control mb-3"
             placeholder="Daterangepicker" bsDaterangepicker formControlName="range" />
      <pre *ngIf="myForm?.value?.range"
           class="code-preview">from {{myForm?.value?.range[0] | date}} to {{myForm?.value?.range[1] | date}}</pre>
    </div>
  </div>
</form>



import { Component, OnInit } from '@angular/core';
import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';

@Component({
  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'demo-datepicker-reactive-forms',
  templateUrl: './reactive-forms.component.html',
  standalone: false
})
export class DemoDatepickerReactiveFormsComponent implements OnInit {
  myForm?: UntypedFormGroup;
  constructor(private formBuilder: UntypedFormBuilder) {}

  ngOnInit() {
    this.myForm = this.formBuilder.group({
      date: null,
      range: null
    });
  }
}

Return focus to input

#

Allows to return focus to input of datepicker or daterangepicker after the date or daterange selection

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

import { Component } from '@angular/core';

@Component({
  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'demo-datepicker-return-focus-to-input',
  templateUrl: './return-focus-to-input.component.html',
  standalone: false
})
export class DemoDatePickerReturnFocusToInputComponent {}

Manual triggering

#

You can manage datepicker's state by using its show(), hide() and toggle() methods

<div class="row">
  <div class="col-xs-12 col-12 col-sm-4 form-group mb-3">
    <input type="text" class="form-control" #dp="bsDatepicker" bsDatepicker [outsideClick]="false">
  </div>
  <div class="col-xs-12 col-12 col-sm-8 form-group mb-3">
    <button class="btn btn-success"
            (click)="dp.show()"
            type="button">
      Open
    </button>

    <button class="btn btn-success"
            (click)="dp.hide()"
            type="button">
      Close
    </button>

    <button class="btn btn-success"
            (click)="dp.toggle()"
            [attr.aria-expanded]="dp.isOpen"
            type="button">
      Toggle
    </button>
  </div>
</div>

import { Component } from '@angular/core';

@Component({
  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'demo-datepicker-triggers-manual',
  templateUrl: './triggers-manual.html',
  standalone: false
})
export class DemoDatepickerTriggersManualComponent {}

Placement

#

Add placement property if you want to change placement

The datepicker's placement is right

The datepicker's placement is top

The datepicker's placement is bottom

The datepicker's placement is left

<div class="row">
  <div class="col-xs-12 col-12 col-sm-6 col-md-3 form-group mb-3 d-flex flex-column justify-content-between">
    <p>The datepicker's placement is right</p>
    <input class="form-control"
      placeholder="Datepicker"
      bsDatepicker
      placement="right">
  </div>
  <div class="col-xs-12 col-12 col-sm-6 col-md-3 form-group mb-3 d-flex flex-column justify-content-between">
    <p>The datepicker's placement is top</p>
    <input class="form-control"
      placeholder="Datepicker"
      bsDatepicker
      placement="top">
  </div>
  <div class="col-xs-12 col-12 col-sm-6 col-md-3 form-group mb-3 d-flex flex-column justify-content-between">
    <p>The datepicker's placement is bottom</p>
    <input class="form-control"
      placeholder="Datepicker"
      bsDatepicker
      placement="bottom">
    </div>
  <div class="col-xs-12 col-12 col-sm-6 col-md-3 form-group mb-3 d-flex flex-column justify-content-between">
    <p>The datepicker's placement is left</p>
    <input class="form-control"
      placeholder="Datepicker"
      bsDatepicker
      placement="left">
  </div>
</div>

import { Component } from '@angular/core';

@Component({
  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'demo-datepicker-placement',
  templateUrl: './placement.html',
  standalone: false
})
export class DemoDatepickerPlacementComponent {}

Config method

#

You can manage datepicker's options by using its setConfig() method

<div class="row">
  <div class="col-xs-12 col-12 col-sm-4 form-group mb-3">
    <input type="text" class="form-control" placeholder="Datepicker" #dp="bsDatepicker" bsDatepicker [bsConfig]="bsConfig">
  </div>
  <div class="col-xs-12 col-12 col-sm-8 form-group mb-3">
    <button class="btn btn-success" (click)="setOptions()" type="button">Set min date</button>
  </div>
</div>

import { Component, ViewChild } from '@angular/core';
import { BsDaterangepickerDirective, BsDatepickerConfig } from 'ngx-bootstrap/datepicker';

@Component({
  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'demo-datepicker-config-method',
  templateUrl: './config-method.html',
  standalone: false
})
export class DemoDatepickerConfigMethodComponent {
  @ViewChild('dp', { static: false }) datepicker?: BsDaterangepickerDirective;

  bsConfig?: Partial<BsDatepickerConfig>;
  minDate = new Date(2018, 5, 13);

  setOptions(): void {
    this.bsConfig = Object.assign({}, { minDate: this.minDate });
    this.datepicker?.setConfig();

    setTimeout(() => {
      this.datepicker?.toggle();
    });
  }
}

Visibility Events

#

You can subscribe to datepicker's visibility events

<div class="row">
  <div class="col-xs-12 col-12 col-sm-6 col-md-4 form-group mb-3">
    <input class="form-control"
           placeholder="Datepicker"
           placement="right"
           bsDatepicker
           (onShown)="handler('onShown')"
           (onHidden)="handler('onHidden')">

  </div>
  <div class="col-xs-12 col-12">
    <pre class="card card-block card-header" *ngFor="let message of messages">{{message}}</pre>
  </div>
</div>



import { Component } from '@angular/core';

@Component({
  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'demo-datepicker-visibility-events',
  templateUrl: './visibility-events.html',
  standalone: false
})

export class DemoDatePickerVisibilityEventsComponent {
  messages: string[] = [];
  message = 'onShown';
  handler(value: string): void {
    if(this.message === value) {
      this.messages = [];
    }
    this.messages.push(`Event ${value} is fired`);
  }
}

Value change event

#

You can subscribe to datepicker's value change event (bsValueChange).

<div class="row">
  <div class="col-xs-12 col-12 col-sm-6 col-md-4 form-group mb-3">
    <div class="mb-3">
      <pre class="card card-block card-header" *ngIf="data">Changed date is {{data | date}}</pre>
    </div>
    <input class="form-control"
           placeholder="Datepicker"
           bsDatepicker
           (bsValueChange)="onValueChange($event)">
  </div>
</div>

import { Component } from '@angular/core';

@Component({
  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'demo-datepicker-value-change-event',
  templateUrl: './value-change-event.html',
  standalone: false
})
export class DemoDatepickerValueChangeEventComponent {
  data?: Date;

  onValueChange(value: Date): void {
    this.data = value;
  }
}

Config properties

#

You can configure the datepicker via its bsConfig option

<div class="row">
  <div class="col-xs-12 col-12 col-md-4 form-group mb-3">
      <input
        class="form-control"
        placeholder="Datepicker"
        bsDatepicker
        [bsConfig]="{ dateInputFormat: 'DD-MM-YYYY', containerClass: 'theme-red' }">
  </div>
</div>

import { Component } from '@angular/core';

@Component({
  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'demo-datepicker-config-object',
  templateUrl: './config-object.html',
  standalone: false
})
export class DemoDatePickerConfigObjectComponent {}

Select dates from other month

#

You can enable dates from other months via selectFromOtherMonth option in bsConfig

<div class="row">
  <div class="col-xs-12 col-12 col-md-4 form-group mb-3">
    <input
      class="form-control"
      placeholder="Datepicker"
      bsDatepicker
      [bsConfig]="{ dateInputFormat: 'DD-MM-YYYY',  selectFromOtherMonth: true }">
  </div>
</div>

import { Component } from '@angular/core';

@Component({
  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'demo-datepicker-select-dates-from-other-months',
  templateUrl: './select-dates-from-other-months.html',
  standalone: false
})
export class DemoDatePickerSelectDatesFromOtherMonthsComponent {}

Select week

#

You can enable ability to select a week number (first day of the week will be selected) via selectWeek option in bsConfig

Also works with selectFromOtherMonth option, which allows to select weeks which started on previous month

If first day of the week is disabled, the next one will be selected.

Two first days of the each week are disabled

If all days in week are disabled, you can't select this week

<div class="row">
  <div class="col-xs-12 col-12 col-md-4 form-group mb-3">
    <input
      class="form-control"
      placeholder="Datepicker with select week"
      bsDatepicker
      [bsConfig]="{ selectWeek: true}">
  </div>
</div>

<p>Also works with <code>selectFromOtherMonth</code> option, which allows to select weeks which started on previous
  month</p>

<div class="row">
  <div class="col-xs-12 col-12 col-md-4 form-group mb-3">
    <input
      class="form-control"
      placeholder="selectFromOtherMonth active"
      bsDatepicker
      [bsConfig]="{ selectWeek: true, selectFromOtherMonth: true }">
  </div>
</div>


<p>If first day of the week is disabled, the next one will be selected.</p>

<div class="row">
  <div class="col-xs-12 col-12 col-sm-6 col-md-5 form-group mb-3">
    <p>Two first days of the each week are disabled</p>
    <input class="form-control" placeholder="Two first days disabled" bsDatepicker [daysDisabled]="[0,1]"
           [bsConfig]="{ selectWeek: true, selectFromOtherMonth: true }">
  </div>

</div>


<p>If all days in week are disabled, you can't select this week</p>

<div class="row">
  <div class="col-xs-12 col-12 col-sm-6 col-md-5 form-group mb-3">
    <input class="form-control" placeholder="All days disabled" bsDatepicker [daysDisabled]="[0,1,2,3,4,5,6]"
           [bsConfig]="{ selectWeek: true }">
  </div>

</div>

import { Component } from '@angular/core';

@Component({
  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'demo-datepicker-select-week',
  templateUrl: './select-week.html',
  standalone: false
})
export class DemoDatePickerSelectWeekComponent {}

Select week range

#

You can enable ability to select a week number (range with first weekday - last weekday will be selected) via selectWeekRange option in bsConfig

Also works with selectFromOtherMonth option, which allows to select weeks which started on previous month

If first day of the week is disabled, the next one will be selected.

Two first days of the each week are disabled

If all days in week are disabled, you can't select this week

<div class="row">
  <div class="col-xs-12 col-12 col-sm-6 col-md-5 form-group mb-3">
    <input
      class="form-control"
      placeholder="Daterangepicker with select week"
      bsDaterangepicker
      [bsConfig]="{ selectWeekDateRange: true}">
  </div>
</div>

<p>Also works with <code>selectFromOtherMonth</code> option, which allows to select weeks which started on previous
  month</p>

<div class="row">
  <div class="col-xs-12 col-12 col-sm-6 col-md-5 form-group mb-3">
    <input
      class="form-control"
      placeholder="Daterangepicker"
      bsDaterangepicker
      [bsConfig]="{ selectWeekDateRange: true, selectFromOtherMonth: true }">
  </div>
</div>


<p>If first day of the week is disabled, the next one will be selected.</p>

<div class="row">
  <div class="col-xs-12 col-12 col-sm-6 col-md-5 form-group mb-3">
    <p>Two first days of the each week are disabled</p>
    <input
      class="form-control"
      placeholder="Two days disabled"
      bsDaterangepicker [daysDisabled]="[0,1]"
      [bsConfig]="{ selectWeekDateRange: true }">
  </div>
</div>


<p>If all days in week are disabled, you can't select this week</p>

<div class="row">
  <div class="col-xs-12 col-12 col-sm-6 col-md-5 form-group mb-3">
    <input
      class="form-control"
      placeholder="All days disabled"
      bsDaterangepicker [daysDisabled]="[0,1,2,3,4,5,6]"
      [bsConfig]="{ selectWeekDateRange: true }">
  </div>
</div>

import { Component } from '@angular/core';

@Component({
  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'demo-datepicker-select-week-range',
  templateUrl: './select-week-range.html',
  standalone: false
})
export class DemoDatePickerSelectWeekRangeComponent {}

Outside click

#

Datepicker closes after outside click by default. To change this behavior, use outsideClick property.

Outside click closes the datepicker in this example

Outside click doesn't close the datepicker in this example

<div class="row">
  <div class="col-xs-12 col-12 col-sm-6 col-md-5 form-group mb-3">
    <p>Outside click closes the datepicker in this example</p>
    <input class="form-control" placeholder="Datepicker" bsDatepicker [outsideClick]="true">
  </div>
  <div class="col-xs-12 col-12 col-sm-6 col-md-5 form-group mb-3">
    <p>Outside click doesn't close the datepicker in this example</p>
    <input class="form-control" placeholder="Datepicker" bsDatepicker [outsideClick]="false">
  </div>
</div>

import { Component } from '@angular/core';

@Component({
  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'demo-datepicker-outside-click',
  templateUrl: './outside-click.html',
  standalone: false
})
export class DemoDatepickerOutsideClickComponent {}

Trigger by isOpen property

#

Datepicker can be shown or hidden by changing isOpen property

<div class="row">
  <div class="col-xs-8 col-8 col-md-5 col-lg-4 form-group mb-3">
    <input class="form-control" placeholder="Datepicker" bsDatepicker [isOpen]="isOpen"/>
  </div>
  <div class="col-xs-4 col-4 col-md-4 form-group mb-3">
    <button class="btn btn-success" (click)="isOpen = !isOpen" type="button">Toggle</button>
  </div>
</div>

import { Component } from '@angular/core';

@Component({
  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'demo-datepicker-trigger-by-isopen',
  templateUrl: './trigger-by-isopen-property.html',
  standalone: false
})
export class DemoDatepickerByIsOpenPropComponent {
  isOpen = false;
}

Custom triggers

#

Use different triggers ( for example keydown, mouseenter and dblclick ) to interact with datepicker

Hover over the input to open the datepicker

Focus on input and press any key to open the datepicker

Сlick twice on input to open the datepicker

<div class="row">
  <div class="col-xs-12 col-12 col-sm-6 col-lg-3 form-group mb-3">
    <p>Hover over the input to open the datepicker</p>
    <input type="text"
           class="form-control"
           placeholder="Datepicker"
           bsDatepicker
           triggers="mouseenter:click">
  </div>
  <div class="col-xs-12 col-12 col-sm-6 col-lg-3 form-group mb-3">
    <p>Focus on input and press any key to open the datepicker</p>
    <input type="text"
           class="form-control"
           placeholder="Daterangepicker"
           bsDaterangepicker
           triggers="keydown:click">
  </div>
  <div class="col-xs-12 col-12 col-sm-6 col-lg-3 form-group mb-3">
    <p>Сlick twice on input to open the datepicker</p>
    <input type="text"
           class="form-control"
           placeholder="Daterangepicker"
           bsDaterangepicker
           triggers="dblclick:click">
  </div>
</div>

import { Component } from '@angular/core';

@Component({
  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'demo-datepicker-triggers-custom',
  templateUrl: './triggers-custom.html',
  standalone: false
})
export class DemoDatepickerTriggersCustomComponent {}

Date custom classes

#

Style dates with custom classes

<div class="row">
  <div class="col-xs-12 col-12 col-sm-6 col-md-4 form-group mb-3">
    <input class="form-control"
           placeholder="Datepicker"
           ngModel
           bsDatepicker
           [dateCustomClasses]="dateCustomClasses">
  </div>
  <div class="col-xs-12 col-12 col-sm-6 col-md-4 form-group mb-3">
    <input class="form-control"
           placeholder="Daterangepicker"
           ngModel
           bsDaterangepicker
           [dateCustomClasses]="dateCustomClasses">
  </div>
</div>

import { Component } from '@angular/core';
import { DatepickerDateCustomClasses } from 'ngx-bootstrap/datepicker';

@Component({
  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'demo-datepicker-date-custom-classes',
  templateUrl: './date-custom-classes.html',
  styleUrls: ['./date-custom-classes.scss'],
  standalone: false
})
export class DemoDatepickerDateCustomClassesComponent {
  dateCustomClasses: DatepickerDateCustomClasses[];

  constructor() {
    const now = new Date();
    const twoDaysAhead = new Date();
    twoDaysAhead.setDate(now.getDate() + 2);
    const fourDaysAhead = new Date();
    fourDaysAhead.setDate(now.getDate() + 4);

    this.dateCustomClasses = [
      { date: now, classes: [] },
      { date: twoDaysAhead, classes: ['bg-warning'] },
      { date: fourDaysAhead, classes: ['bg-danger', 'text-warning'] }
    ];
  }
}

[object Module]

Tooltip for selected dates

#

<div class="row">
  <div class="col-xs-12 col-12 col-md-4 form-group mb-3">
    <input type="text"
           placeholder="Datepicker"
           class="form-control"
           bsDatepicker
           [dateTooltipTexts]="selectedDates"
           [bsConfig]="{ dateTooltipTexts: selectedDates }">
  </div>
</div>

import { Component } from '@angular/core';
import { DatepickerDateTooltipText } from 'ngx-bootstrap/datepicker';

@Component({
  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'demo-datepicker-tooltip-to-selected-dates',
  templateUrl: './tooltip-to-selected-dates.html',
  standalone: false
})
// eslint-disable-next-line @angular-eslint/component-class-suffix
export class DemoDatePickerTooltipToSelectedDates {
  selectedDates : DatepickerDateTooltipText[] = [{ date: new Date('2020-08-08'), tooltipText: '8th of August'},
    { date: new Date('2020-08-09'), tooltipText: '9th of August'},
    { date: new Date('2020-08-07'), tooltipText: '7th of August'}
  ];
}

Quick select ranges

#

Quick select ranges can be added to Daterangepicker using ranges

<div class="row">
  <div class="col-xs-12 col-12 col-md-4 form-group mb-3">
    <input type="text"
           placeholder="Daterangepicker"
           class="form-control"
           bsDaterangepicker
           [bsConfig]="{ ranges: ranges }">
  </div>
</div>

import { Component } from '@angular/core';

interface IRange {
  value: Date[];
  label: string;
}

@Component({
  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'demo-datepicker-quick-select-ranges',
  templateUrl: './quick-select-ranges.html',
  standalone: false
})
export class DemoDatePickerQuickSelectRangesComponent {
  ranges: IRange[] = [{
    value: [new Date(new Date().setDate(new Date().getDate() - 7)), new Date()],
    label: 'Last 7 Days'
  }, {
    value: [new Date(), new Date(new Date().setDate(new Date().getDate() + 7))],
    label: 'Next 7 Days'
  }];

}

Prevent change to next month

#

Pick some date from second month and it wont change to the next month

<div class="row">
  <div class="col-xs-12 col-12 col-md-4 form-group mb-3">
    <input type="text"
           placeholder="Daterangepicker"
           class="form-control"
           bsDaterangepicker
           [bsConfig]="{ preventChangeToNextMonth: true }">
  </div>
</div>

import { Component } from '@angular/core';

@Component({
  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'demo-prevent-change-to-next-month',
  templateUrl: './prevent-change-to-next-month.component.html',
  standalone: false
})
export class DemoDatepickerPreventChangeToNextMonthComponent {
  maxDate = new Date();

  constructor() {
    this.maxDate.setDate(this.maxDate.getDate() + 7);
  }
}

Previous month in Daterangepicker

#

Pick previous & current month instead of current & next month.When daterange selected and related to current month, daterangepicker will works by default, with current & next month

<div class="row">
  <div class="col-xs-12 col-12 col-md-4 form-group mb-3">
    <input type="text"
           placeholder="Daterangepicker"
           class="form-control"
           bsDaterangepicker
           [bsConfig]="{ showPreviousMonth: true }">
  </div>
</div>

import { Component } from '@angular/core';

@Component({
  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'demo-daterangepicker-show-previous-month',
  templateUrl: './show-previous-month.html',
  standalone: false
})
// eslint-disable-next-line @angular-eslint/component-class-suffix
export class DemoDateRangePickerShowPreviousMonth {}

Show Today Button

#

Display an optional 'Today' button that will automatically select today's date.

<div class="row">
  <div class="col-xs-12 col-12 col-md-4 form-group mb-3">
    <input type="text"
           placeholder="Datepicker"
           class="form-control"
           bsDatepicker
           [bsConfig]="{ containerClass: 'theme-dark-blue', showTodayButton: true, todayPosition: 'center' }">
  </div>
</div>

import { Component } from '@angular/core';

@Component({
  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'demo-datepicker-today-button',
  templateUrl: './today-button.html',
  standalone: false
})
export class DemoDatepickerTodayButtonComponent {}

Show Clear Button

#

Display an optional 'Clear' button that will automatically clear date.

<div class="row">
    <div class="col-xs-12 col-12 col-md-4 form-group mb-3">
      <input type="text"
             placeholder="Datepicker"
             class="form-control"
             bsDatepicker
             [bsConfig]="{ containerClass: 'theme-orange', showClearButton: true, clearPosition: 'right' }">
    </div>
  </div>

import { Component } from '@angular/core';

@Component({
  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'demo-datepicker-clear-button',
  templateUrl: './clear-button.html',
  standalone: false
})
export class DemoDatepickerClearButtonComponent {}

Start view

#

Add startView property if you want to change start view

The datepicker's start view is day (default)

The datepicker's start view is month

The datepicker's start view is year

<div class="row">
  <div class="col-xs-12 col-12 col-sm-6 col-md-4 form-group mb-3">
    <p>The datepicker's start view is day (default)</p>
    <input bsDatepicker
           class="form-control"
           placeholder="Datepicker">
  </div>
  <div class="col-xs-12 col-12 col-sm-6 col-md-4 form-group mb-3">
    <p>The datepicker's start view is month</p>
    <input [bsConfig]="{startView: 'month'}"
           bsDatepicker
           class="form-control"
           placeholder="Datepicker">
  </div>
  <div class="col-xs-12 col-12 col-sm-6 col-md-4 form-group mb-3">
    <p>The datepicker's start view is year</p>
    <input [bsConfig]="{startView: 'year'}"
           bsDatepicker
           class="form-control"
           placeholder="Datepicker">
  </div>
</div>

import { Component } from '@angular/core';

@Component({
  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'demo-datepicker-start-view',
  templateUrl: './start-view.html',
  standalone: false
})
export class DemoDatepickerStartViewComponent {}

Max Date Range in Daterangepicker

#

Max date range after first date selection can be added to Daterangepicker using maxDateRange.

If you also use maxDate property, you can't select second date, which exceeds value of maxDate.

<div class="row">
  <div class="col-xs-12 col-12 col-md-4 form-group mb-3">
    <input type="text"
           placeholder="Daterangepicker"
           class="form-control"
           bsDaterangepicker
           [maxDate]="maxDate"
           [bsConfig]="{ maxDateRange: 25 }">
  </div>
</div>

import {Component} from '@angular/core';

@Component({
  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'demo-datepicker-max-date-range',
  templateUrl: './max-date-range.html',
  standalone: false
})
export class DemoDateRangePickerMaxDateRangeComponent {
  maxDate: Date;

  constructor() {
    this.maxDate = new Date();
    this.maxDate.setDate(this.maxDate.getDate() + 30);
}
}

With timepicker

#

You can enable timepicker via withTimepicker config option

<div class="row">
  <div class="col-xs-12 col-12 col-md-4 form-group">
    <input type="text"
           placeholder="Datepicker"
           class="form-control"
           [bsConfig]="{withTimepicker: true, rangeInputFormat : 'MMMM Do YYYY, h:mm:ss a', dateInputFormat: 'MMMM Do YYYY, h:mm:ss a'}"
           bsDatepicker>
  </div>
  <div class="col-xs-12 col-12 col-md-4 form-group">
    <input type="text"
           placeholder="Daterangepicker"
           class="form-control"
           [bsConfig]="{withTimepicker: true, rangeInputFormat : 'MMMM Do YYYY, h:mm:ss a', dateInputFormat: 'MMMM Do YYYY, h:mm:ss a'}"
           bsDaterangepicker>
  </div>
</div>

import { Component } from '@angular/core';

@Component({
  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'demo-datepicker-with-timepicker',
  templateUrl: './with-timepicker.html',
  standalone: false
})

export class DemoDatepickerWithTimepickerComponent {
}

Close behavior with timepicker changes

#

If you use datepicker with timepicker together, you are able to set keepDatepickerOpened config option and keep datepicker opened until date isn't changed

<div class="row">
  <div class="col-xs-12 col-12 col-md-4 form-group">
    <input type="text"
           placeholder="Datepicker"
           class="form-control"
           [bsConfig]="{withTimepicker: true, keepDatepickerOpened: true, rangeInputFormat : 'MMMM Do YYYY, h:mm:ss a', dateInputFormat: 'MMMM Do YYYY, h:mm:ss a'}"
           bsDatepicker>
  </div>
  <div class="col-xs-12 col-12 col-md-4 form-group">
    <input type="text"
           placeholder="Daterangepicker"
           class="form-control"
           [bsConfig]="{withTimepicker: true, keepDatepickerOpened: true, rangeInputFormat : 'MMMM Do YYYY, h:mm:ss a', dateInputFormat: 'MMMM Do YYYY, h:mm:ss a'}"
           bsDaterangepicker>
  </div>
</div>

import { Component } from '@angular/core';

@Component({
  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'datepicker-close-behavior',
  templateUrl: './datepicker-close-behavior.html',
  standalone: false
})
export class DatepickerCloseBehaviorComponent {
}

Don't overwrite dates out of rule

#

If you use datepicker with rules (minDate, maxDate) you can set config property keepDatesOutOfRules to true to avoid overwriting invalid dates. Default value is false.

<div class="row">
  <div class="col-xs-12 col-12 col-md-4 form-group mb-3">
    <input type="text"
           placeholder="Datepicker"
           class="form-control"
           bsDatepicker
           [bsConfig]="{keepDatesOutOfRules: true}"
           [maxDate]="maxDate"
           [minDate]="minDate"
           [bsValue]="bsInvalidDate"
    >
  </div>
  <div class="col-xs-12 col-12 col-md-4 form-group mb-3">
    <input type="text"
           placeholder="Daterangepicker"
           class="form-control"
           bsDaterangepicker
           [bsConfig]="{keepDatesOutOfRules: true}"
           [maxDate]="maxDate"
           [minDate]="minDate"
           [bsValue]="bsRangeValue"
    >
  </div>
</div>

import { Component } from '@angular/core';

@Component({
  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'keep-dates-out-of-rules',
  templateUrl: './keep-dates-out-of-rules.component.html',
  standalone: false
})
export class KeepDatesOutOfRulesComponent {
  minDate = new Date();
  bsRangeValue: Date[];
  maxDate = new Date();
  bsInvalidDate: Date = new Date();

  constructor() {
    this.maxDate.setDate(this.maxDate.getDate() + 7);
    this.bsInvalidDate.setDate(this.maxDate.getDate() + 2);
    this.bsRangeValue = [this.minDate, this.bsInvalidDate];
  }
}

Installation

ng add ngx-bootstrap  --component datepicker
### Standalone component usage
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';

@Components({
  imports: [
    BrowserAnimationsModule,
    BsDatepickerModule,
    ...
  ]
})
export class AppComponents(){}


### Module usage
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';

@NgModule({
  imports: [
    BrowserAnimationsModule,
    BsDatepickerModule,
    ...
  ]
})
export class AppModule(){}

Selector

Selector

Selector

BsDatepickerConfig

For date range picker there are BsDaterangepickerConfig which inherits all properties, except displayMonths, for range picker it default to 2

Properties

adaptivePosition
Type: boolean
Default value: false

sets use adaptive position

allowedPositions
Type: string[]

Set allowed positions of container.

clearButtonLabel
Type: string
Default value: Clear

Label for 'clear' button

clearPosition
Type: string
Default value: right

Positioning of 'clear' button

containerClass
Type: string
Default value: theme-green

CSS class which will be applied to datepicker container, usually used to set color theme

customRangeButtonLabel
Type: string
Default value: Custom Range

Label for 'custom range' button

customTodayClass
Type: string

Add class to current day

dateCustomClasses
Type: DatepickerDateCustomClasses[]

Default date custom classes for all date/range pickers

datesDisabled
Type: Date[]

Disable specific dates

datesEnabled
Type: Date[]

Enable specific dates

dateTooltipTexts
Type: DatepickerDateTooltipText[]

Default tooltip text for all date/range pickers

daysDisabled
Type: number[]

Disable specific days, e.g. [0,6] will disable all Saturdays and Sundays

displayOneMonthRange
Type: boolean

Show one months for special cases (only for dateRangePicker)

  1. maxDate is equal to today's date
  2. minDate's month is equal to maxDate's month
initCurrentTime
Type: boolean

Set current hours, minutes, seconds and milliseconds for bsValue

isAnimated
Type: boolean
Default value: false

turn on/off animation

keepDatepickerOpened
Type: boolean
Default value: false

Set rule for datepicker closing. If value is true datepicker closes only if date is changed, if user changes only time datepicker doesn't close. It is available only if property withTimepicker is set true

keepDatesOutOfRules
Type: boolean
Default value: false

Allows keep invalid dates in range. Can be used with minDate, maxDate

maxDate
Type: Date

Default max date for all date/range pickers

maxDateRange
Type: number

Max Date Range in days

minDate
Type: Date

Default min date for all date/range pickers

minMode
Type: BsDatepickerViewMode

Default mode for all date pickers

preventChangeToNextMonth
Type: boolean

Prevents change to next month for right calendar in two calendars view (dateRangePicker only)

rangeInputFormat
Type: string
Default value: L

Date format for date range input field

ranges
Type: BsCustomDates[]

Predefined ranges

returnFocusToInput
Type: boolean
Default value: false

If true, returns focus to the datepicker / daterangepicker input after date selection

selectFromOtherMonth
Type: boolean

Makes dates from other months active

selectWeek
Type: boolean

Allows select first date of the week by click on week number

selectWeekDateRange
Type: boolean

Allows select daterange as first and last day of week by click on week number (dateRangePicker only)

showClearButton
Type: boolean
Default value: false

Shows clear button

showPreviousMonth
Type: boolean

Shows previous and current month, instead of current and next (dateRangePicker only)

showTodayButton
Type: boolean
Default value: false

Shows 'today' button

showWeekNumbers
Type: boolean
Default value: true

Allows to hide week numbers in datepicker

startView
Type: BsDatepickerViewMode
Default value: day

The view that the datepicker should start in

todayButtonLabel
Type: string
Default value: Today

Label for 'today' button

todayPosition
Type: string
Default value: center

Positioning of 'today' button

useUtc
Type: boolean
Default value: false

sets use UTC date time format

withTimepicker
Type: boolean
Default value: false

Shows timepicker under datepicker

Basic

Inline

With animation

Adaptive position

Initial state

bsValue property sets initial state in this example

ngModel property sets two-way data binding in this example

Custom date format



Hide on scroll


Themes


Locales


Min-max

Days disabled

Saturday and Sunday are not selectable

Saturday and Sunday are selectable

Saturday and Sunday are not selectable

Saturday and Sunday are selectable

Dates disabled

Dates enabled

Display one month

maxDate is today

minDate month is equal to maxDate month

Min-mode


Disabled

Custom today class

Forms


Reactive forms

Return focus to input

Manual triggering

Placement

The datepicker's placement is right

The datepicker's placement is top

The datepicker's placement is bottom

The datepicker's placement is left

Config method

Visibility Events

Value change event

Config properties

Select dates from other month

Select week

Also works with selectFromOtherMonth option, which allows to select weeks which started on previous month

If first day of the week is disabled, the next one will be selected.

Two first days of the each week are disabled

If all days in week are disabled, you can't select this week

Select week range

Also works with selectFromOtherMonth option, which allows to select weeks which started on previous month

If first day of the week is disabled, the next one will be selected.

Two first days of the each week are disabled

If all days in week are disabled, you can't select this week

Outside click

Outside click closes the datepicker in this example

Outside click doesn't close the datepicker in this example

Trigger by isOpen property

Custom triggers

Hover over the input to open the datepicker

Focus on input and press any key to open the datepicker

Сlick twice on input to open the datepicker

Date custom classes

Tooltip for selected dates

Quick select ranges

Prevent change to next month

Previous month in Daterangepicker

Show Today Button

Show Clear Button

Start view

The datepicker's start view is day (default)

The datepicker's start view is month

The datepicker's start view is year

Max Date Range in Daterangepicker

With timepicker

datepicker close behavior with timepicker

Don't overwrite dates out of rule

components