Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including bilyone-ngx-daterangepicker-material with all npm packages installed. Try it out:

require("moment/package.json"); // moment is a peer dependency. var bilyoneNgxDaterangepickerMaterial = require("bilyone-ngx-daterangepicker-material")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

bilyone-ngx-daterangepicker-material v1.0.0

Angular 2+ date range picker (with material design theme)


Pure Angular 2+ Date range picker.

Build Status npm version

This plugin is compatible with Angular2, Angular4, Angular5 and Angular6. This plugin uses moment.js.

This plugin is a rewrite to angular from bootstrap daterangepicker, so it doesn't depends on jquery nor bootstrap.

This plugin have an independant theme which looks more close to material design, so the material design is just a style.



Install the plugin from npm:

npm install ngx-daterangepicker-material --save .

import NgxDaterangepickerMd in your module:

import { FormsModule } from '@angular/forms';
import { NgxDaterangepickerMd } from 'ngx-daterangepicker-material';
import { App } from './app';

    imports:      [... , FormsModule, NgxDaterangepickerMd],
    declarations: [App],
    bootstrap:    [App]
export class AppModule {}

Usage example


<input type="text" ngxDaterangepickerMd [(ngModel)]="selected" class="form-control"/>


selected: {startdDate: Moment, endDate: Moment};

with some options:


<input type="text" matInput
    [locale]="{applyLabel: 'ok', format: 'DD-MM-YYYY'}"


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

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 choosedDate to get its selection state.

<ngx-daterangepicker-material (choosedDate)="choosedDate($event)">

Available options

autoApply, showDropdowns, singleDatePicker, showWeekNumbers, showISOWeekNumbers, alwaysShowCalendars, showClearButton

These options are booleans


(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


(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.

minDate, maxDate

To set the minimal and maximal date, these options are a moment date


the locale options is an object with:

    format: 'MM/DD/YYYY',
    separator: ' To ', // default is ' - '
    cancelLabel: 'Cancel', // detault is 'Cancel'
    applyLabel: 'Okay' // detault is 'Apply'
    firstDay: 1 // first day is monday

startKey and endKey

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:


<input type="text" ngxDaterangepickerMd startKey="start" endKey="end" [(ngModel)]="model">

the model we got would be: {start: Date, end: Date}


(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:

<input type="text" ngxDaterangepickerMd startKey="start" endKey="end" [ranges]="ranges" [(ngModel)]="model">
ranges: any = {
    'Today': [moment(), moment()],
    'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
    'Last 7 Days': [moment().subtract(6, 'days'), moment()],
    'Last 30 Days': [moment().subtract(29, 'days'), moment()],
    'This Month': [moment().startOf('month'), moment().endOf('month')],
    'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]

Other options with ranges

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

alwaysShowCalendarsbooleanset true if you want to display the ranges with the calendar
keepCalendarOpeningWithRangebooleanset true if you want the calendar won't be closed after choosing a range
showRangeLabelOnInputbooleanset true if you want do display the range label on input


firstMonthDayClassstringadd a custom class for all first day of the month
lastMonthDayClassstringadd a custom class for all last day of the month
emptyWeekRowClassstringadd a custom class for all date in a week not in the current month
lastDayOfPreviousMonthClassstringadd a custom class for the last day of the previous month
firstDayOfNextMonthClassstringadd a custom class for the first day of the next month


AttributPossible valuesDescription
opensleft, center, rightposition the calendar from the input element
dropsup, downposition the calendar to the up or down of the calendar

Available events


Fired when clicked on range, and send an object with range label and dates value, eg: {label: 'This Month', dates: [Moment, Moment]}


Fires when any date selection occurs, like when selecting days, ranges, or when applying or cancelling changes, and sends an object containing start and end dates, eg: {startDate: Moment, endDate: Moment}





RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free