Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

ngx-daterangepicker-material

fetrarij154.8kMIT6.0.4TypeScript support: included

Angular 9 and 10 date range picker (with material design theme)

angular2, angular4, angular5, angular6, angular7, angular8, angular9, angular10, angular11, angular12, angular13, ng2, daterangepicker, material, component, directive, daterange, date, dayjs, picker

readme

ngx-daterangepicker-material

Angular 2+ Date range picker.

Build Status npm version last commit

This Angular Material plugin is compatible with Angular 2+ and is Ivy compatible. It leverages dayjs to handle date manipulation and parsing. The base for this plugin was originally the Bootstrap Date Range Picker, but its dependencies on jQuery, Bootstrap and dayjs.js were removed.

Demo: https://fetrarij.github.io/ngx-daterangepicker-material/


Versions

Angular ngx-daterangepicker-material
>=12.0.0 v6.x.x
<=11.0.0 v5.x.x
>=9.0.0 v4.x.x
<9.0.0 v2.x.x
>=9.0.0 depends on @angular/material v3.x

Installation

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';

@NgModule({
    imports: [
        ... ,
        FormsModule,
        NgxDaterangepickerMd.forRoot()
    ],
    declarations: [App],
    bootstrap:    [App]
})
export class AppModule {}

Usage example

Html:

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

Typescript:

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

with some options:

Html:

<input type="text" matInput
    ngxDaterangepickerMd
    [locale]="{applyLabel: 'ok', format: 'DD-MM-YYYY'}"
    startKey="start"
    endKey="end"
    [(ngModel)]="selected"
    name="daterange"/>

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

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

Available options

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

These options are booleans

isCustomDate

(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

isInvalidDate

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

isTooltipDate

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

minDate, maxDate

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

dateLimit

To set max number of the date we can choose

locale

the locale options is an object with:

{
    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

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:

example:

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

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

ranges

(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': [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).

    <input
      ngxDaterangepickerMd
      [closeOnAutoApply]="true"
      [autoApply]="true"
      [singleDatePicker]="true"
      [linkedCalendars]="true"
      [(ngModel)]="selected"
      (datesUpdated)="datesUpdated($event)"
      class="datepicker-calendar-icon">

    <a class="ngx-daterangepicker-action" (click)="openDatepicker()">
      Open
    </a>

  ...
    @ViewChild(DaterangepickerDirective, { static: false }) pickerDirective: DaterangepickerDirective;
  ...
  ...
  openDatepicker() {
    this.pickerDirective.open();
  }

Timepicker

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 12 there would be 0mn, 15mn, 30mn, 45mn,)
timePickerSeconds boolean set true if you want do display second's select

Customisation

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

Positioning

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

(rangeClicked)

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

(datesUpdated)

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}

(clearClicked)

Fired when clicked on the clear button

Global locale

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

eg:

@NgModule({
    imports: [
        ... ,
        FormsModule,
        NgxDaterangepickerMd.forRoot({
            separator: ' - ',
            applyLabel: 'Okay',
        })
    ],
    declarations: [App],
    bootstrap:    [App]
})

Development

Prepare your environment

Install local dependencies: npm install.

Development server

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

changelog

5.0.0 (2021-06-11)

Chores
  • fix build (76780d36)

  • Add ng add ngx-daterangepicker-material

  • replace moment.js with dayjs

  • Support angular 11 and angular 12

4.0.1 (2020-09-01)

Chores
  • travis: fix build (de52eea8)

  • support angular 10

    New Features
  • emptyWeekColumnClass: add emptyWeekColumnClass attribute to add a custom class for all date in a week not in the current month Fixes #315 #294 #126 (ba1d136b)

  • reactive-forms: implemente disable in form control (7c3265b6)

3.0.0 (2020-04-05)

This new major release pivots ngx-daterangepicker-material to become an @angular/material component, in that it now requires @angular/material to correctly render and leverages @angular/material building blocks throughout. As such, it adheres to theming and UX standards. It now correctly uses the CDK Overlay to render the dialog for instance, which takes care of some issues present with the previous implementation (if you had components with a z-index > 1000 on your page, you were going to have a bad time).

Upgrading from previous versions, you will have to add @angular/material to your project, after which the new version of ngx-daterangepicker-material should require no further changes to work correctly.

New Features

  • ng add ngx-daterangepicker-material functionality was added to allow users to easily add this component to their Angular project
  • the component now correctly accepts Angular Material themes (the documentation has a theme switcher identical to https://material.angular.io/ to showcase this)

Chores

  • bump all @angular packages to 9.1.0
  • bump almost every other package to latest
  • fixed ng deploy to correctly deploy to GitHub pages
  • added Prettier code formatter to address formatting inconsistencies

Other Changes

  • demo:
    • updated documentation to use @angular/material components throughout

2.1.7 (2019-08-05)

Chores

  • deps:
    • bump lodash from 4.17.11 to 4.17.14 (864a641d)
    • bump lodash.mergewith from 4.6.1 to 4.6.2 (623909bb)

New Features

  • rangepicker: update calendar when changing the input element Fix #115 (671dcf9a)

Bug Fixes

  • label: clear title to clear label in local (30f7c2e4)
  • ranges: date doesnt update if alwaysShowCalendars = false and keepCalendarOpeningWithRange = true Close #147 (28e3684d)

Other Changes

  • demo: add lockStartDate in full-options page (1ceff3f9)

2.1.1 (2019-05-04)

Documentation Changes

  • demo: add fr language for demo purpose (c374cb8d)

Bug Fixes

  • ngModelChange: initialized by undefined (5beddf21)

Other Changes

  • locale: update locale config (41dac5b1)

2.1.0 (2019-04-05)

Chores

  • demo:
  • doc: add development process (76ef56be)
  • package: add package-lock.json to fix build (fc91e9bf)
  • build: fix build (0d930d5c)

New Features

  • dateLimit: add the dateLimit option Fix #118 (d0564523)
  • inline: allow isCustomDate for inline mode #44 (b54de73a)

Bug Fixes

  • calendar:
  • firstDay:
    • jumps day label with multiple components Fix #144 (d52868eb)
    • jumps day label with multiple components Fix #144 (64f372dc)
  • ranges: Timepicker not updated when range clicked Close #1015 (8957c67c)
  • style: timepicker hided (3ec5798e)

Other Changes

2.0.0 (2019-02-04)

Chores

New Features

  • daterangepicker: add global locale config #69 (0c303f7c)

Breaking change: Instead of using NgxDaterangepickerMd you should now use NgxDaterangepickerMd.forRoot() in imports.

Bug Fixes

  • locale: fix setting locale for individual and inline mode Fix #75 (f73c7515)
  • typo: typo in readme (9b70f872)

Other Changes

  • global-locale: add doc for global locale (57530799)

Refactors

1.2.7 (2018-12-14)

New Features

Bug Fixes

  • onPush: popup doesn't close on first click when OnPush changeDetection (7e2d27d6)
  • ie11-clickdate: Unable to select custom date range from calendar in IE1 (0a07daba)
  • locale-format: Locale.format does not change date formats (5c4f7545)

Code Style Changes

  • move-css: move .btn / .clear / .buttons / [hidden] under .md-drppicker (76406c02)
  • month-year-select: add cursor pointer (916810fd)

1.2.6 (2018-11-29)

Chores

Documentation Changes

  • timepicker: add timepicker to doc and demo (1c95fda8)

New Features

  • timepicker: enabling timepicker (02b4c655)

Bug Fixes

  • daterange: initialize format (8f40adce)
  • calendar: fix the position after opening (69ae2760)

1.2.5 (2018-11-23)

Chores

New Features

  • clear:
    • when setting value to falsy, datepicker will clear, and added demo (6b9f8d3c)
    • when setting value to falsy, datepicker will clear, and added demo (18559a7a)
  • daterangepicker:
    • if there are InvalidDate from isInvalidDate function, range become the first range until the first invalid date Fix #7 (14488fb2)
    • if there are InvalidDate from isInvalidDate function, range become the first range until the first invalid date Fix #7 (f0f4cce4)

Bug Fixes

  • animation-css:
    • Calendar always opens from left top corner even though [opens] is set to center or right (9faa528b)
    • Calendar always opens from left top corner even though [opens] is set to center or right (512bb913)
  • range:
    • current month became previous month (f0a1aae2)
    • current month became previous month (8ade181f)
  • datesUpdated:
    • only when dates model is updated (b0494430)
    • only when dates model is updated (111db419)

1.2.4 (2018-10-04)

New Features

  • picker:
    • possibility to create a class in an element so that this element can not handle the click event located outside calendar #39 (13ba7dd1)
    • possibility to create a class in an element so that this element can not handle the click event located outside calendar #39 (ac3f3626)

Bug Fixes

  • calendar: wrong typo (4eb70fcb)
  • showRangeLabelOnInput:
    • custom range = show date (52e34933)
    • Showing the preset label doesn't work for the first time with supplied date (4bdaaeb2)

Other Changes

  • demo:
    • add demo for : ability to open the calendar from a button (08c9b068)
    • add demo for : ability to open the calendar from a button (26d12fb9)
  • readme: add donation button (0f4758dc)

1.2.2 (2018-09-11)

New Features

  • apply-button: on apply, set endDate = startDate if it is not selected Close #42 (5c8022e3)
  • inline: allow isInvalidDate (36933b16)

Bug Fixes

1.2.1 (2018-09-10)

New Features

Bug Fixes

  • calendar: Next month calendar doesn't show up if the preview dates for next month covers the range & fix on disabled ranges (6b60146a)
  • dropdowns: linkedCalendar & disable dates lower than startDate (009dad5c)
  • component: Template parse errors: 'ngx-daterangepicker-material' is not a known element: when using as inline element (a77805ad)

Other Changes

  • range: dont close the calendar after choosing a range ( Close #38 ) & ability to show the range's name in the input instead of just the dates that belong to it ( Close #34 ) (998dcae0)

1.2.0 (2018-07-24)

New Features

  • attribut: add new attributs:

    • opens: ability to position calendar to left, right or center #21

    • drops: ability to position calendar to up or down (c8c64605)

    • firstMonthDayClass & lastMonthDayClass & emptyWeekRowClass & lastDayOfPreviousMonthClass & firstDayOfNextMonthClass : for customising the dates classes (Thanks to: @butterknight )

  • ranges:

    • set active class to default date in range (6fc70f02)
    • add rangeClicked event on click to range so we can get the label and the dates of the clicked range (72d43b61)

Bug Fixes

  • single-datepicker:
    • the month label on january have a wrong year (397554c7)
    • on select a single datepicker, the selected value is not updated (af838860)
  • range: wrong var: showCalInRanges not isShown (8a6d31c3)

1.1.4 (2018-07-11)

New Features

  • ranges:

    • set active class to default date in range (6fc70f02)
    • add event on click to range so we can get the label and the dates of the clicked range (72d43b61)

      new available event: (rangeClicked)

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

Bug Fixes

  • range: wrong var: showCalInRanges not isShown (8a6d31c3)

1.1.3 (2018-07-10)

New Features

  • ranges: disabling a range if it's beyond minDate or maxDate

1.1.2 (2018-06-22)

Bug Fixes

  • ranges: Applied range does not have 'active' class - Fix #17 (1c0f03d4)
  • autoApply: autoApply showing Cancel & Apply buttons - Fix #16 (53288f50)
  • readme: remove showInputs (672ec99a)

1.1.1 (2018-06-12)

Chores

New Features

  • #3: show 2nd calendar as per maxDate if provided - As, we have provided maxDate, there is no use of showing next month as 2nd calendar as those dates will not be selectable - instead, can it be maxDate's month as second calendar and prev month as first calendar - Fix #3 (daf00119)
  • customisation: ability to add custom classes and custom invalid dates function - isCustomDate - isInvalidDate - Close #12 (145bbf5c)

Bug Fixes

  • clear-date: bug fixes - doesn't clear the date when clearing - add options to show/hide the clear button (022c0d00)
  • input-element: label is not updated after applying (6247be2f)

1.1.0 (2018-06-11)

Chores

Documentation Changes

  • readme: remove showInputs & add showDropdowns (3dadd3bf)

New Features

  • calendar: remove showInputs & add showDropdowns (e3edd35f)
  • clear-event: add ability to clear dates (ac06e825)
  • firstDay: ability to change week starting calendar with locale.firstDay (bf5ba843)

Bug Fixes

  • input: update input element for model initialized (95405fc6)
  • change-event: change & ngModelChange events - fix ngModelChange - change event not trigerred - add some tests - Fix #10 (caf56351)
  • render: 'double' class when double calendar only (c8bfd024)

Code Style Changes

  • select: styling the select on showDropdowns (727f47f3)

1.0.6 (2018-06-03)

Bug Fixes

  • render: 'double' class when double calendar only (c8bfd024)

  • calendar: Fix issue #6

1.0.5 (2018-05-29)

Chores

New Features

  • daterangepicker: add custom ranges (67771664)

Code Style Changes

1.0.4 (2018-05-28)

Chores

Bug Fixes

  • calendar: - fix prev & next on linked datepicker - fix single datepicker rendering (a46ded8a)

Other Changes