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.

Contents

Usage

Examples

Basic

BsDatepickerModule is activily developed but you can use it already

Notebale 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 node_modules/ngx-bootstrap/datepicker/bs-datepicker.css via package bundler like Angular CLI, if you're using one.

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

Locales

Datepicker can use different locales.
It's possible to change a locale by changing locale property in bsConfig object, list of available locales is in dropdown below.

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

Example:

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

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

Disabled (scratch, WIP)

If you want to disable datepicker set is isDisabled property to true

Forms

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

Reactive forms

API Reference


This is a legacy version of datepicker without support of daterangepicker, locales, themes, etc.

Contents

Usage

Example

API Reference