Need help with ngx-daterangepicker-material?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

fetrarij
172 Stars 167 Forks MIT License 503 Commits 88 Opened issues

Description

Pure Angular 2+ date range picker with material design theme, a demo here:

Services available

!
?

Need anything else?

Contributors list

# 94,906
CSS
HTML
angular...
angular...
273 commits
# 309,488
angular...
CSS
HTML
range-p...
13 commits
# 334,831
angular...
CSS
HTML
range-p...
10 commits
# 398,630
angular...
CSS
HTML
range-p...
5 commits
# 422,269
angular...
CSS
HTML
range-p...
4 commits
# 71,608
webrtc
C++
C
pixhawk
4 commits
# 17,174
dateran...
vuetify
iterm2
Swift
3 commits
# 405,212
CSS
HTML
angular...
range-p...
3 commits
# 439,503
CSS
angular...
HTML
range-p...
3 commits
# 17,694
angular...
fronten...
JavaScr...
Webpack
2 commits
# 316,874
HTML
PHP
angular...
angular...
2 commits
# 749
GitHub
rust-la...
wechat-...
query-l...
2 commits
# 489,154
angular...
CSS
HTML
range-p...
2 commits
# 489,155
angular...
CSS
HTML
range-p...
2 commits
# 394,410
angular...
CSS
HTML
range-p...
2 commits
# 38,052
front-e...
web-dev...
HTML
CSS
2 commits
# 554,074
angular...
CSS
HTML
range-p...
1 commit
# 554,075
angular...
CSS
HTML
range-p...
1 commit
# 192,118
C#
HTML
Xamarin
Firefox
1 commit
# 555,470
angular...
CSS
HTML
range-p...
1 commit

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
moment.js
to handle date manipulation and parsing. The base for this plugin was originally the Bootstrap Date Range Picker, but its dependencies on jQuery and Bootstrap were removed.
Angular Material
themes are fully supported since v3.0.0, so you can just drop this component into an existing Material project and it will blend right into your application.

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


Versions

| Angular| ngx-daterangepicker-material| | ------|:------:| | >=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:


Typescript:

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

with some options:

Html:


Typescript:

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.

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

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: moment.weekdaysMin(),
    monthNames: moment.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:

html

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:

html

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

| 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


  Open

```javascript

... @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: [Moment, Moment]}

(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: Moment, endDate: Moment}

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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.