ngx-daterangepicker-bootstrap

> Date range picker - Angular 21 and Bootstrap 5

This Angular Bootstrap plugin is compatible with Angular 21. \
It leverages dayjs to handle date manipulation and parsing and Bootstrap 5 is used for visual details. \
This plugin is a fork of NgxDaterangepickerMaterial by Fetrarijaona R. which is an improved version that uses Bootstrap 5. \
The base for this plugin was originally the Bootstrap Date Range Picker, but its dependencies on jQuery and moment.js were removed.

![](https://i.postimg.cc/mkjyzxk5/ngx-daterangepicker-bootstrap.png)

---

Versions

| Angular | Bootstrap | ngx-daterangepicker-bootstrap |
|---------|:----------|:-----------------------------:|
| 21.0.0 | 5.3.0 | 21.0.x |
| 20.1.0 | 5.3.0 | 20.5.x |
| 19.0.0 | 5.3.0 | 19.5.x |
| 18.0.0 | 5.3.0 | 18.5.x |
| 17.1.0 | 5.3.0 | 17.5.x |
| 16.2.0 | 5.3.0 | 16.5.x |
| 15.1.0 | 5.2.0 | 15.5.x |
| 14.1.0 | 5.2.0 | 14.5.x |

---

Installation

Install the plugin from npm:

npm install ngx-daterangepicker-bootstrap --save

---

Configuration for standalone, version 21, 20, 19, 18 and 17

StackBlitz | Date Range Picker - Angular 21 and Bootstrap 5

Using new standalone:

import provideDaterangepickerLocale provider function (recomended), in app.config.ts:

```

typescript

import { ApplicationConfig, importProvidersFrom } from '@angular/core';

import { provideRouter } from '@angular/router';

import { routes } from './app.routes';

import { provideDaterangepickerLocale } from "ngx-daterangepicker-bootstrap";



export const appConfig: ApplicationConfig = {

  providers: [

    provideRouter(routes),

    provideDaterangepickerLocale({

      separator: ' - ',

      applyLabel: 'Okay',

    })

  ]

};



import NgxDaterangepickerBootstrapComponent standalone component \

and NgxDaterangepickerBootstrapDirective standalone directive, in your component (example app.component.ts)

typescript

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

import { RouterOutlet } from '@angular/router';

import { FormsModule} from "@angular/forms";

import { NgxDaterangepickerBootstrapDirective, NgxDaterangepickerBootstrapComponent } from "ngx-daterangepicker-bootstrap";

import dayjs, { Dayjs } from "dayjs";



@Component({

  selector: 'app-root',

  standalone: true,

  imports: [RouterOutlet, FormsModule, NgxDaterangepickerBootstrapDirective, NgxDaterangepickerBootstrapComponent],

  templateUrl: './app.component.html',

  styleUrl: './app.component.scss'

})

export class AppComponent {

  ...

}



---

or, using old module:



import NgxDaterangepickerBootstrapModule module, in app.config.ts:

typescript

import { ApplicationConfig, importProvidersFrom } from '@angular/core';

import { provideRouter } from '@angular/router';

import { routes } from './app.routes';

import { NgxDaterangepickerBootstrapModule } from "ngx-daterangepicker-bootstrap";



export const appConfig: ApplicationConfig = {

  providers: [

    provideRouter(routes),

    importProvidersFrom(NgxDaterangepickerBootstrapModule.forRoot({

      separator: ' - ',

      applyLabel: 'Okay',

    }))

  ]

};





import NgxDaterangepickerBootstrapModule module, in your component (example app.component.ts)

typescript

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

import { RouterOutlet } from '@angular/router';

import { FormsModule } from "@angular/forms";

import { NgxDaterangepickerBootstrapModule } from "ngx-daterangepicker-bootstrap";

import dayjs, { Dayjs } from "dayjs";



@Component({

  selector: 'app-root',

  standalone: true,

  imports: [RouterOutlet, FormsModule, NgxDaterangepickerBootstrapModule],

  templateUrl: './app.component.html',

  styleUrl: './app.component.scss'

})

export class AppComponent {

  ...

}





---



Configuration for module, versions 17, 16, 15 and 14



StackBlitz | Date Range Picker - Angular 16 and Bootstrap 5



import NgxDaterangepickerModule and NgxDaterangepickerLocaleService in your module:

typescript

...

import { FormsModule } from '@angular/forms';

import { NgxDaterangepickerModule } from 'ngx-daterangepicker-bootstrap';

import { AppComponent } from './app';



@NgModule({

    imports: [

        ... ,

        FormsModule,

        NgxDaterangepickerBootstrapModule.forRoot()

    ],

    providers: [NgxDaterangepickerLocaleService],

    declarations: [AppComponent],

    bootstrap:    [AppComponent]

})

export class AppModule {}





Usage example



Html:

html



Typescript:

typescript

selected: {startDate: Dayjs, endDate: Dayjs};



$3

Html:

html

       ngxDaterangepickerBootstrap

       [locale]="{applyLabel: 'ok', format: 'DD-MM-YYYY'}"

       startKey="start"

       endKey="end"

       [(ngModel)]="selected"

       name="daterange"/>



Typescript:

typescript

selected: {start: Dayjs, end: Dayjs};



You can play with our online demo here

and browse our demo code here.



Inline usage



You can use the component directly in your templates, which will set its

inline mode to true, in which case the calendar won't hide after date/range selection. You can then use the events: rangeClicked or datesUpdated or chosenDate

 to get its selection state.

html





Here is the demo of the forked version for other detalis: https://fetrarij.github.io/ngx-daterangepicker-material/



Available options



$3



>These options are booleans



$3



>(function) A function that is passed each date in the calendars before they are displayed, and may return a string or array of CSS class names to apply to that date's calendar cell



$3

>(function) A function that is passed each date in the two calendars before they are displayed, and may return true or false to indicate whether that date should be available for selection or not.



$3

>(function) A function that is passed each date in the two calendars before they are displayed, and may return a text to be displayed as a tooltip.



$3



>To set the minimal and maximal date, these options are either a dayjs date or string in ISO format



$3



>To set max number of the date we can choose



$3



>the locale options is an object with:

javascript

{

    format: 'MM/DD/YYYY', // could be 'YYYY-MM-DDTHH:mm:ss.SSSSZ'

    displayFormat: 'MM/DD/YYYY', // default is format value

    direction: 'ltr', // could be rtl

    weekLabel: 'W',

    separator: ' To ', // default is ' - '

    cancelLabel: 'Cancel', // detault is 'Cancel'

    applyLabel: 'Okay', // detault is 'Apply'

    clearLabel: 'Clear', // detault is 'Clear'

    customRangeLabel: 'Custom range',

    daysOfWeek: dayjs.weekdaysMin(),

    monthNames: dayjs.monthsShort(),

    firstDay: 1 // first day is monday

}



Check here for setting the global locale



$3



Theses 2 options are for the key you want for the value, default are

startDate and endDate, it means the value we have from ngModel are: {startDate: Date, endDate: Date}

 by default;



Specifiyng

startKey and endKey

 would have different model:



example:

html





the model we got would be:

{start: Date, end: Date}





$3



(object) Set predefined date ranges the user can select from. Each key is the label for the range, and its value an array with two dates representing the bounds of the range. As an example:

html

javascript

ranges: any = {

    'Today': [dayjs(), dayjs()],

    'Yesterday': [dayjs().subtract(1, 'days'), dayjs().subtract(1, 'days')],

    'Last 7 Days': [dayjs().subtract(6, 'days'), dayjs()],

    'Last 30 Days': [dayjs().subtract(29, 'days'), dayjs()],

    'This Month': [dayjs().startOf('month'), dayjs().endOf('month')],

    'Last Month': [dayjs().subtract(1, 'month').startOf('month'), dayjs().subtract(1, 'month').endOf('month')]

  }



#### Other options with ranges



You can use bellow options when using the ranges. The default are

false

.



| Attribut | Type |Description |

| --- | --- |--- |

| alwaysShowCalendars | boolean | set to

true

 if you want to display the ranges with the calendar |

| keepCalendarOpeningWithRange | boolean | set to

true

 if you want the calendar won't be closed after choosing a range |

| showRangeLabelOnInput | boolean | set to

true

 if you want to display the range label on input |

| customRangeDirection | boolean | set to

true

 if you want to allow selection range from end date first |

| lockStartDate | boolean | set to

true

 if you want to lock start date and change only the end date |



#### Open datepicker from outside



It is possible to open datepicker from outside. You should create an input with attached datepicker directive and a button with "ngx-daterangepicker-action" class (to prevent triggering of clickOutside).

html

               id="input"

           class="form-control"

           ngxDaterangepickerBootstrap

           [closeOnAutoApply]="true"

           [autoApply]="true"

           [singleDatePicker]="true"

           [linkedCalendars]="true"

           [(ngModel)]="selected"

           (datesUpdated)="datesUpdated($event)">



    

      Open

typescript



  ...

    @ViewChild(NgxDaterangepickerBootstrapDirective, { static: false }) pickerDirective: NgxDaterangepickerBootstrapDirective;

  ...

  ...

  openDatepicker() {

    this.pickerDirective.open();

  }





$3



You have to set the attribute

timePicker to true

 if you want to enable the timepicker.



You can use theses options:



| Attribut | Type |Description |

| --- | --- |--- |

| timePicker24Hour | boolean | set to

true

 if you want to set the timepicker to 24h instead of having AM and PM |

| timePickerIncrement | number | set the value increment of the minutes (eg: for

 there would be 0mn, 15mn, 30mn, 45mn,) |

| timePickerSeconds | boolean | set

true

 if you want do display second's select |





$3



| Attribut | Type |Description |

| --- | --- |--- |

| firstMonthDayClass | string | add a custom class for all first day of the month |

| lastMonthDayClass | string | add a custom class for all last day of the month |

| emptyWeekRowClass | string | add a custom class in a row with a date in a week not in the current month |

| emptyWeekColumnClass | string | add a custom class for all date in a week not in the current month |

| lastDayOfPreviousMonthClass | string | add a custom class for the last day of the previous month |

| firstDayOfNextMonthClass | string | add a custom class for the first day of the next month |



$3



| Attribut | Possible values |Description |

| --- | --- |--- |

| opens | left, center, right | position the calendar from the input element |

| drops | up, down | position the calendar to the up or down of the calendar |



Available events



$3



>Fired when clicked on range, and send an object with range label and dates value, eg:

{label: 'This Month', dates: [Dayjs, Dayjs]}





$3



>Fires when the date model is updated, like applying (if you have activated the apply button), or when selecting a range or date without the apply button, and sends an object containing start and end dates, eg:

{startDate: Dayjs, endDate: Dayjs, label: 'This Month'}





$3



>Fired when clicked on the clear button



$3



For setting the global locale, pass this object to NgxDaterangepickerModule.forRoot().



eg:

typescript

@NgModule({

    imports: [

        ... ,

        FormsModule,

        NgxDaterangepickerBootstrapModule.forRoot({

            separator: ' - ',

            applyLabel: 'Okay',

        })

    ],

    providers: [NgxDaterangepickerLocaleService],

    declarations: [AppComponent],

    bootstrap:    [AppComponent]

})





Development



$3



Install local dependencies:

npm install

.



$3



Run

npm start

 to start a development server on a port 4200.



Open

http//:localhost:4200

 on your browser.



Tests



Run

npm test or ng test` to run tests.

License

MIT

ngx-daterangepicker-bootstrap

Versions

Installation

Install the plugin from npm:

npm install ngx-daterangepicker-bootstrap --save

---

Configuration for standalone, version 21, 20, 19, 18 and 17

StackBlitz | Date Range Picker - Angular 21 and Bootstrap 5

Using new standalone:

import provideDaterangepickerLocale provider function (recomended), in app.config.ts:

```

typescript

import { ApplicationConfig, importProvidersFrom } from '@angular/core';

import { provideRouter } from '@angular/router';

import { routes } from './app.routes';

import { provideDaterangepickerLocale } from "ngx-daterangepicker-bootstrap";



export const appConfig: ApplicationConfig = {

  providers: [

    provideRouter(routes),

    provideDaterangepickerLocale({

      separator: ' - ',

      applyLabel: 'Okay',

    })

  ]

};



import NgxDaterangepickerBootstrapComponent standalone component \

and NgxDaterangepickerBootstrapDirective standalone directive, in your component (example app.component.ts)

typescript

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

import { RouterOutlet } from '@angular/router';

import { FormsModule} from "@angular/forms";

import { NgxDaterangepickerBootstrapDirective, NgxDaterangepickerBootstrapComponent } from "ngx-daterangepicker-bootstrap";

import dayjs, { Dayjs } from "dayjs";



@Component({

  selector: 'app-root',

  standalone: true,

  imports: [RouterOutlet, FormsModule, NgxDaterangepickerBootstrapDirective, NgxDaterangepickerBootstrapComponent],

  templateUrl: './app.component.html',

  styleUrl: './app.component.scss'

})

export class AppComponent {

  ...

}



---

or, using old module:



import NgxDaterangepickerBootstrapModule module, in app.config.ts:

typescript

import { ApplicationConfig, importProvidersFrom } from '@angular/core';

import { provideRouter } from '@angular/router';

import { routes } from './app.routes';

import { NgxDaterangepickerBootstrapModule } from "ngx-daterangepicker-bootstrap";



export const appConfig: ApplicationConfig = {

  providers: [

    provideRouter(routes),

    importProvidersFrom(NgxDaterangepickerBootstrapModule.forRoot({

      separator: ' - ',

      applyLabel: 'Okay',

    }))

  ]

};





import NgxDaterangepickerBootstrapModule module, in your component (example app.component.ts)

typescript

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

import { RouterOutlet } from '@angular/router';

import { FormsModule } from "@angular/forms";

import { NgxDaterangepickerBootstrapModule } from "ngx-daterangepicker-bootstrap";

import dayjs, { Dayjs } from "dayjs";



@Component({

  selector: 'app-root',

  standalone: true,

  imports: [RouterOutlet, FormsModule, NgxDaterangepickerBootstrapModule],

  templateUrl: './app.component.html',

  styleUrl: './app.component.scss'

})

export class AppComponent {

  ...

}





---



Configuration for module, versions 17, 16, 15 and 14



StackBlitz | Date Range Picker - Angular 16 and Bootstrap 5



import NgxDaterangepickerModule and NgxDaterangepickerLocaleService in your module:

typescript

...

import { FormsModule } from '@angular/forms';

import { NgxDaterangepickerModule } from 'ngx-daterangepicker-bootstrap';

import { AppComponent } from './app';



@NgModule({

    imports: [

        ... ,

        FormsModule,

        NgxDaterangepickerBootstrapModule.forRoot()

    ],

    providers: [NgxDaterangepickerLocaleService],

    declarations: [AppComponent],

    bootstrap:    [AppComponent]

})

export class AppModule {}





Usage example



Html:

html



Typescript:

typescript

selected: {startDate: Dayjs, endDate: Dayjs};



$3

Html:

html

       ngxDaterangepickerBootstrap

       [locale]="{applyLabel: 'ok', format: 'DD-MM-YYYY'}"

       startKey="start"

       endKey="end"

       [(ngModel)]="selected"

       name="daterange"/>



Typescript:

typescript

selected: {start: Dayjs, end: Dayjs};



You can play with our online demo here

and browse our demo code here.



Inline usage



You can use the component directly in your templates, which will set its

inline mode to true, in which case the calendar won't hide after date/range selection. You can then use the events: rangeClicked or datesUpdated or chosenDate

 to get its selection state.

html





Here is the demo of the forked version for other detalis: https://fetrarij.github.io/ngx-daterangepicker-material/



Available options



$3



>These options are booleans



$3



>(function) A function that is passed each date in the calendars before they are displayed, and may return a string or array of CSS class names to apply to that date's calendar cell



$3

>(function) A function that is passed each date in the two calendars before they are displayed, and may return true or false to indicate whether that date should be available for selection or not.



$3

>(function) A function that is passed each date in the two calendars before they are displayed, and may return a text to be displayed as a tooltip.



$3



>To set the minimal and maximal date, these options are either a dayjs date or string in ISO format



$3



>To set max number of the date we can choose



$3



>the locale options is an object with:

javascript

{

    format: 'MM/DD/YYYY', // could be 'YYYY-MM-DDTHH:mm:ss.SSSSZ'

    displayFormat: 'MM/DD/YYYY', // default is format value

    direction: 'ltr', // could be rtl

    weekLabel: 'W',

    separator: ' To ', // default is ' - '

    cancelLabel: 'Cancel', // detault is 'Cancel'

    applyLabel: 'Okay', // detault is 'Apply'

    clearLabel: 'Clear', // detault is 'Clear'

    customRangeLabel: 'Custom range',

    daysOfWeek: dayjs.weekdaysMin(),

    monthNames: dayjs.monthsShort(),

    firstDay: 1 // first day is monday

}



Check here for setting the global locale



$3



Theses 2 options are for the key you want for the value, default are

startDate and endDate, it means the value we have from ngModel are: {startDate: Date, endDate: Date}

 by default;



Specifiyng

startKey and endKey

 would have different model:



example:

html





the model we got would be:

{start: Date, end: Date}





$3



(object) Set predefined date ranges the user can select from. Each key is the label for the range, and its value an array with two dates representing the bounds of the range. As an example:

html

javascript

ranges: any = {

    'Today': [dayjs(), dayjs()],

    'Yesterday': [dayjs().subtract(1, 'days'), dayjs().subtract(1, 'days')],

    'Last 7 Days': [dayjs().subtract(6, 'days'), dayjs()],

    'Last 30 Days': [dayjs().subtract(29, 'days'), dayjs()],

    'This Month': [dayjs().startOf('month'), dayjs().endOf('month')],

    'Last Month': [dayjs().subtract(1, 'month').startOf('month'), dayjs().subtract(1, 'month').endOf('month')]

  }



#### Other options with ranges



You can use bellow options when using the ranges. The default are

false

.



| Attribut | Type |Description |

| --- | --- |--- |

| alwaysShowCalendars | boolean | set to

true

 if you want to display the ranges with the calendar |

| keepCalendarOpeningWithRange | boolean | set to

true

 if you want the calendar won't be closed after choosing a range |

| showRangeLabelOnInput | boolean | set to

true

 if you want to display the range label on input |

| customRangeDirection | boolean | set to

true

 if you want to allow selection range from end date first |

| lockStartDate | boolean | set to

true

 if you want to lock start date and change only the end date |



#### Open datepicker from outside



It is possible to open datepicker from outside. You should create an input with attached datepicker directive and a button with "ngx-daterangepicker-action" class (to prevent triggering of clickOutside).

html

               id="input"

           class="form-control"

           ngxDaterangepickerBootstrap

           [closeOnAutoApply]="true"

           [autoApply]="true"

           [singleDatePicker]="true"

           [linkedCalendars]="true"

           [(ngModel)]="selected"

           (datesUpdated)="datesUpdated($event)">



    

      Open

typescript



  ...

    @ViewChild(NgxDaterangepickerBootstrapDirective, { static: false }) pickerDirective: NgxDaterangepickerBootstrapDirective;

  ...

  ...

  openDatepicker() {

    this.pickerDirective.open();

  }





$3



You have to set the attribute

timePicker to true

 if you want to enable the timepicker.



You can use theses options:



| Attribut | Type |Description |

| --- | --- |--- |

| timePicker24Hour | boolean | set to

true

 if you want to set the timepicker to 24h instead of having AM and PM |

| timePickerIncrement | number | set the value increment of the minutes (eg: for

 there would be 0mn, 15mn, 30mn, 45mn,) |

| timePickerSeconds | boolean | set

true

 if you want do display second's select |





$3



| Attribut | Type |Description |

| --- | --- |--- |

| firstMonthDayClass | string | add a custom class for all first day of the month |

| lastMonthDayClass | string | add a custom class for all last day of the month |

| emptyWeekRowClass | string | add a custom class in a row with a date in a week not in the current month |

| emptyWeekColumnClass | string | add a custom class for all date in a week not in the current month |

| lastDayOfPreviousMonthClass | string | add a custom class for the last day of the previous month |

| firstDayOfNextMonthClass | string | add a custom class for the first day of the next month |



$3



| Attribut | Possible values |Description |

| --- | --- |--- |

| opens | left, center, right | position the calendar from the input element |

| drops | up, down | position the calendar to the up or down of the calendar |



Available events



$3



>Fired when clicked on range, and send an object with range label and dates value, eg:

{label: 'This Month', dates: [Dayjs, Dayjs]}





$3



>Fires when the date model is updated, like applying (if you have activated the apply button), or when selecting a range or date without the apply button, and sends an object containing start and end dates, eg:

{startDate: Dayjs, endDate: Dayjs, label: 'This Month'}





$3



>Fired when clicked on the clear button



$3



For setting the global locale, pass this object to NgxDaterangepickerModule.forRoot().



eg:

typescript

@NgModule({

    imports: [

        ... ,

        FormsModule,

        NgxDaterangepickerBootstrapModule.forRoot({

            separator: ' - ',

            applyLabel: 'Okay',

        })

    ],

    providers: [NgxDaterangepickerLocaleService],

    declarations: [AppComponent],

    bootstrap:    [AppComponent]

})





Development



$3



Install local dependencies:

npm install

.



$3



Run

npm start

 to start a development server on a port 4200.



Open

http//:localhost:4200

 on your browser.



Tests



Run

npm test or ng test` to run tests.

License

MIT