fetrarij/ngx-daterangepicker-material

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

ngx-daterangepicker-material's Issues

Ability to open calendars towards left rather than right

I am trying to use this calendar in my project. But my calendar selection is on the right hand side of the screen. When the calendar is opened, it doesn't have space to show both calendars when the widget opens towards right. Can we add a parameter with which we can open calendar towards left rather than on right.

expected param: [opens]="left"

Month order issue

Hi,

there is an issue with the daterangepicker that when a user goes one month forward and then comes back to original month, the order of month changes.

Example : https://fetrarij.github.io/ngx-daterangepicker-material/full

open the calender from dropdown, now move to next month using the arrow ( > ) on top right corner i.e Dec 2018- Jan 2019, now move back using ( < ) arrow on top left corner, the month now will change to Oct 2018-Dec 2018, instead of Nov 2018- Dec 2018

No isInvalidDate on inline date picker :(

😞

Select week start date

I don't see an option for changing the start date of the week, ex. set it to Monday.
It would be very useful

transform dd / mm / yyyy It does not work.

Hello,

I am applying this in my html

<div class="row">
    <div class="col s6">
        <input type="text" ngxDaterangepickerMd [(ngModel)]="selected" [locale]="locale" [showCustomRangeLabel]="true" [alwaysShowCalendars]="alwaysShowCalendars" [ranges]="ranges" [showClearButton]="true" [linkedCalendars]="true" [keepCalendarOpeningWithRange]="keepCalendarOpeningWithRange"
            [showRangeLabelOnInput]="showRangeLabelOnInput" class="form-control" placeholder="Rango de fechas..." />
    </div>
</div>

and in my ts:

locale: any = {
customRangeLabel: 'Personalizar2',
format: moment().format('dd/mm/yyyy'),
separator: ' - ', // default is ' - '
cancelLabel: 'Calcel', // detault is 'Cancel'
applyLabel: 'Apply', // detault is 'Apply',
daysOfWeek: [
'Do',
'Lu',
'Ma',
'Mi',
'Ju',
'Vi',
'Sa'
],
monthNames: [
'Enero',
'Febrero',
'Marzo',
'Abril',
'Mayo',
'Junio',
'Julio',
'Agusto',
'Septiembre',
'Octubre',
'Noviembre',
'Diciembre'
],
firstDay: 1 // first day is monday
};

the name change in the months if it works, but in the date format no. It always shows MM / DD / YYYY and I need DD / MM / YYYY how do I solve it?

Showing the preset label doesn't work for the first time with supplied date.

I have provided here the start and end dates using [(ngModel)]. Once I click on the preset and click on apply, then on it starts showing the label. Not before that.

P.S - Do you also have some donation link? You have done a lot for us and me personally.

startDate/endDate keeps getting clobbered in reactive form

I'm trying this date range picker as part of a form group in a reactive form. Whenever I select a date range with the picker the value stored in the form control is correct.

But if I change the value of another control in the form group causing a form group value change event, or if I simply open the picker again, the startDate and endDate values have been clobbered with different and invalid values (endDate < startDate)

NOTE: this problem also happens when using a template-driven (non-reactive) form. But the example here is for the reactive form.

Example:

• select a date range in the picker:
  
• form control value is correct: start: 2018-11-01T00:00:00+11:00 end: 2018-11-03T23:59:59+11:00
• open the date range picker, selected values have changed and are invalid:
  

html:

<div class="col-auto">
          <input type="text" name="dateRangeX" id="dateRangeX" ngxDaterangepickerMd class="form-control" formControlName="dateRange"
            [ranges]="pickerRanges" />
</div>

ts:

export class BasicChartComponent implements OnInit, AfterViewInit {

...snip...

  pickerRanges = {
    'Last 7 Days': [moment().subtract(6, 'days'), moment()],
    'Last 30 Days': [moment().subtract(29, 'days'), moment()],
    'Last 90 Days': [moment().subtract(89, 'days'), moment()],
    'This Month': [moment().startOf('month'), moment().endOf('month')],
    'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
  }

  monthForm = new FormGroup({
    charger: new FormControl('all'),
    dateRange: new FormControl({
      endDate: moment(),
      startDate: moment().subtract(1, 'month')
    }),
  });

  constructor(private chargerService: ChargerService) {
  }

Last month doesn't adhere to min and max values?

I am using presets and have a preset called 'Last Month' that looks like this.

export const LAST_MONTH: DateRangePreset = {
  name: 'Last Month',
  range: [
    moment()
      .subtract(1, 'month')
      .startOf('month'),
    moment()
      .subtract(1, 'month')
      .endOf('month')
  ]
};

I have this construct for internal purposes and just send the range bit to ngx-daterangepicker-material.

This doesn't seem to be following the minDate and maxDate settings. I have another preset for Last 30 Days which seems to be working fine.

export const LAST_30_DAYS: DateRangePreset = {
  name: 'Last 30 Days',
  range: [moment().subtract(30, 'days'), moment().subtract(1, 'days')]
};

Screenshots

Last Month

Last 30 Days

Clear selection

This is a feature request.
It would be useful if there was a way to clear selection. I use this to filter records. It would be very useful if I could just clear the filter to get all values, instead of picking a large timespan (and still filtering with the values in the DB or wherever).

Currently, I tried deleting it with backspace, but as soon as the input is focused the calendar opens and overlaps it. A button inside calendar for clearing would be nice. Also an exposed method would be useful, so for example I could add a suffix icon to the input that calls it

Allow blocking a range of list of dates.

I want to use this date picker for a scheduling app.

The minDate and maxDate is step towards what I want to use it for - what I would like to do is supply it with a list of dates that are already taken, and have those be blocked out.

Is this feature already available or is it in the works?

Is there a way to know which preset range was selected?

I am creating a component where I am gonna be using two of these range pickers and I want to know which range I have selected in the first so I can programmatically change the range on the second one and vice versa.

Currently, I didn't find a way to figure out which range is selected be it a custom one or one of the supplied presets.

Is there a way to do this ?

No change event

There is no change event that we could subscribe to when a change happens.
The binding to the member variable works, but there is no event that signals when the change happens.

Adding the ngxDaterangepickerMd seems to disable the native inputs (change) method.
(ngModelChange) does trigger, but the argument is always a blank object for some reason.
Also the selection should happen when it's applied (button click or auto-apply). Currently the model is changed as soon as the second date is selected, not when the selection is applied.

Can i use day.js instead moment.js with this?

Bug found in [linkedCalendars]="true"

BUG 1
If you select JAN 2018 (or any year) on the 2nd datepicker, the first one goes to AUG 2018 instead of DEC 2017

BUG 2
If you select a year on the first datepicker, the year-selection for the 2nd datepicker turns white.
NOTE: the bug disappear if you select a date inside the datepicker

Here a demo: https://stackblitz.com/edit/bug-ngxdatarangepicker

Open calendar from another element, button, icon

Allow other elements to show the calendar, for example a icon, button, etc

Unable to select custom date range from calendar in IE11

User is not able to select date range from available calendar. When click on dates from calendar, then date is not selected in IE. Its working perfectly on chrome but it is having some issues on IE11.

After debugging, I found there is a issue in ngx-daterangepicker-material.js under esm5 file; line 722; 'e' parameter on 'clickdate' function giving wrong element. e. target expecting 'td' but on IE11 it is coming as 'span' and that's why it is failing.

for timebeing I have made one change and now it is working on IE11.

Locale.format does not change date formats

ngx-daterangepicker-material/src/daterangepicker/daterangepicker.component.ts

Lines 145 to 149 in 0b4ed03

	if (this.timePicker && !this.locale.format) {
	this.locale.format = moment.localeData().longDateFormat('lll');
	} else {
	this.locale.format = moment.localeData().longDateFormat('L');
	}

Looking at the code above, it appears that even if a format is passed as part of the locale, it is not used.

I'm wondering if something like this would be more preferable:

if (!this.locale.format) { 
    if (this.timePicker) { 
        this.locale.format = moment.localeData().longDateFormat('lll'); 
    } else { 
        this.locale.format = moment.localeData().longDateFormat('L'); 
    } 
 }

This sets the format when one is not passed based on whether the timepicker is enabled or not. If a format is passed, we do not need to do anything.

What do you think?

I'm aware that the format could be set by overriding the moment formats for the relevant locale but I'm not sure that's very easy to do globally.

AOT compilation error

Hello, I am using v.1.3.0 with Angular 7 and works fine with a simple ng-serve, but when I build the application with ng-build and AOT enabled, it fails with the following error:

ERROR in Error during template compile of 'AppModule'
  Function calls are not supported in decorators but 'weekdaysMin' was called in 'ɵb'
    'ɵb' calls 'weekdaysMin' at ../ngx-daterangepicker-material/ngx-daterangepicker-material.ts(24,17).

I import the picker module in my app module with NgxDaterangepickerMd.forRoot().

show "2nd / to" 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?

Could we set endDate = startDate if it is not selected ?

When user selects startDate and clicks apply, endDate is set to null. I request you to set endDate = startDate if endDate is not selected.

Different models

Model properties are different!

In Custom ranges model is: startDate and endDate.
In Full Options model is: start and end.

I start my ngModel with { startDate: moment(), endDate: moment() };
But after change value, ngModel value is {start: Moment, end: Moment}.

Don't close the calendar after choosing a range

Allow keeping the calendar open after selecting a range.

For example, after clicking "Last 7 Days", I'd like the see the following:

Popup doesn't close on first click when OnPush changeDetection

When ChangeDetectionStrategy is set to 'OnPush', it's required to click twice outside daterangepicker container to close it. Same issue with 'Cancel' & 'Apply' - you need to click twice to close popup.

Affected version: 1.2.6

https://stackblitz.com/edit/angular-ngx-daterangepicker-material-onpush

Next month calendar doesn't show up if the preview dates for next month covers the range.

I know the title is confusing so here's a picture to go along with it.

I selected THIS MONTH and that range falls under the preview dates or advance dates that the August calendar shows for the September month.

In this case, the calendar doesn't show the September month at all. Even clicking on that right arrow doesn't take me to September calendar.

Inline mode

Add ability to set the calendar to inline.
With this options, it could be easy to set the calendar in a modal.
in this case we can track the apply event (may close the modal ...)

Positioning of the calendar using drop property

When i'm using the drop property "up" on an input to toggle the drop menu, the menu doesn"t systematically open on the desired place. I'm using Angular 6.0.0.

You can try this on your own example, using property center/top.
Any idea how to solve this?

Thks

Setting the timePicker to true doesn't show the select boxes to choose times

Hey there

First of all, great Daterangepicker component! I've been looking out for one that uses material design.

But setting the timePicker boolean to true doesn't doesn't show the select boxes to choose times in addition to dates.

Perhaps there is something I missed? I am using the code below to achieve my goal.

<mat-form-field>
     <span matPrefix class="fa fa-calendar"></span>
     <input type="text" matInput ngxDaterangepickerMd [locale]="{format:'DD/MM/YYYY HH:mm',firstDay:1}" />
</mat-form-field>

@ViewChild(DaterangepickerDirective) daterangeDirective: DaterangepickerDirective
this.daterangeDirective.picker.timePicker = true;

ability to show the range's name in the input instead of just the dates that belong to it.

Is it possible to show the preset name instead of the dates for the preset? Example

If I select Today, I wanna show Today on the input and not the actual date.

Only if I select Custom however, it makes sense to show dates.

setPosition

In some cases the datepicker is not well placed, I have seen that you have the function setPosition, how do I trigger that function? Thank you

Looking for calendar icon to open the dateeange picker

While the daterange picker is really a nice work done. I would recommend giving a calendar icon just like the material datepicker gives and it will be awesome.
https://material.angular.io/components/datepicker/overview

change language with locale object

Hi,
I could not find how to change the language with the locale object. Is there any way of doing so by config, like in 'matDatepicker'?
thanks.

how to setting the global configuration?

for example, I want to change default setting options, add default range for each date-picker.
I don't know if I have it right now, maybe we can use provider injection.
just like the angular material

prev & next icons are missing in corner case

Thanks for this great project!
I found it does not show the <, > icons when I set minDate (say 2017-May-22) and maxDate (say 2018-May-21); When I use "from" date calendar and go to previous months it shows the < icon, but once it reaches May (in this case), it does not show any icons in both the calendars - so we cannot go to any other months. Issue could be it does not consider year when comparing months.

Template parse errors: 'ngx-daterangepicker-material' is not a known element: when using as inline element

I have added NgxDaterangepickerMd to my @NgModule imports, and using the non-inline mode works fine.

eg.

    <input ngxDaterangepickerMd [(ngModel)]="selected"  matInput placeholder="Date" [(ngModel)]="value">

However - using it as an inline component doesn't seem to be working properly:

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

compiler.js:215 Uncaught Error: Template parse errors:
'ngx-daterangepicker-material' is not a known element:
1. If 'ngx-daterangepicker-material' is an Angular component, then verify that it is part of this module.
2. If 'ngx-daterangepicker-material' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
  </section>

  [ERROR ->]<ngx-daterangepicker-material (choosedDate)="choseDate($event)">
  </ngx-daterangepicker-material>

Default Date Range For Inline Mode

Hi, Is it possible to pass default date range for date picker in inline mode , unable to use ngModel in date range picker while using inline mode

Ability to style/mark dates

In the original daterangepicker project there were a couple of functions to style and mark as invalid certain days.

Is that possible with yours?

The functions I'm referring to are:
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.
isCustomDate: (function) A function that is passed each date in the two calendars before they are displayed, and may return a string or array of CSS class names to apply to that date's calendar cell.

.btn / .buttons / .clear classes may pollute other libraries..

ngx-daterangepicker-material/src/daterangepicker/daterangepicker.component.scss

Line 633 in 2e649c6

.btn {

related to #60
After exposed CSS to global, these .btn / .buttons / .clear classes may pollute other libraries.
How about moving all these css under .md-drppicker ?

What's your plan ?
Or using ShadowDom instead of None ?
thx.

The year on January Title is for previous year.

https://fetrarij.github.io/ngx-daterangepicker-material/single-datepicker

If you start scrolling back the months, it goes from "Feb 2018" to "Jan 2017".

I believe the issue is here in daterangepicker.component.html

<ng-container *ngIf="!showDropdowns || !calendarVariables.left.dropdowns">
{{this.locale.monthNames[calendarVariables?.left?.calendar[1][1].month()]}} {{ calendarVariables?.left?.calendar[0][0].format(" YYYY")}}

{{ calendarVariables?.left?.calendar[0][0].format(" YYYY")}}
Is asking for the year of the first date in the top left of the calendar.
For January this date is usually a date in December.

Probable solution is to do the same thing as the Month, and get the 2nd date of the second row, which should always be in the same year as the current month:
{{ calendarVariables?.left?.calendar[1][1].format(" YYYY")}}

autoApply showing "Cancel" & "Apply" buttons

[autoApply] = "true"
is showing "Cancel" & "Apply" buttons.

Allow it to be used on select elements as well as input

It'd be great if this could be similiar to the bootstrap version on select elements as well as inputs.

(rangeClicked) doesn't fire when we click Okay or apply button

(rangeClicked) doesn't fire when we click Okay or apply button in custom range calendar view. If this behavior is correct than how can I attach event on APPLY button.

isInvalidDate still allow for selecting a range on either side of the invalid date.

This is perhaps a tricky issue as, perhaps you want to allow people to do that (ie. blocking out weekends, but allowing people to still select that range).

In which case - the user could apply their own 'unselect the range' function with datesUpdated - but for the inline picker this means you need to be able to set the set the start date and end date as inputs.

Applied range does not have 'active' class

When you apply a range filter and re-open popup again "applied" range should be marked some way (e.g. with class 'active', like it is on jQuery version), but it is not.

Difficult to modify CSS

It's difficult for me to modify this lib's CSS. Now what I can do only is using !important & ::ng-deep.
Using ::ng-deep alone cannot work.

I recommend writing CSS in ng-select way. see https://github.com/ng-select/ng-select/blob/f84906b550284968e9cc9715c60c8dcde92a3780/src/ng-select/ng-select.component.ts#L67

Any plan on this? Thx.

UI responsiveness

The date picker is not showing properly on small screens. It should be responsive.

Inline and locale issue

Hi,

When using the DaterangepickerComponent inline and setting the following locale

<ngx-daterangepicker-material [locale]="{format: 'DD/MM/YYYY HH:mm:ss', firstDay: 1}" >
</ngx-daterangepicker-material>

It throws this error

It looks like it has overwritten the locale entirely as it is not able to push the daysOfWeek array further since it is 'undefined'

A range on the left isn't highlighted by default even if it matches the supplied range

Say I supply an object with {startDate: moment(), endDate: moment()} that matches the 'Today' range, it should be highlighted when the datepicker is opened for the first time.

Currently the range names are only highlighted if someone clicked on them.

startDate and endDate inverted for custom range picker

Hi!

thanks for this nice component! Since angular material isn't implementing a date range picker, your component is very useful.

I have noticed a bug, reproducible with your demo page :

startDate and endDate are inverted. The endDate is before the startDate.

Could you look at it?

Calendar always opens from left top corner even though [opens] is set to center or right

This is basically a CSS transform origin issue. Since the component accepts those properties, we should change the transform-origin to account for these changes.

Display calendars and ranges together

Is there any way to display both the calendars and the custom ranges in the same time, like the bootstrap picker does? As soon as I add the ranges the calendars disappear, and only the menu with custom ranges shows.
If it's not supported it would be useful feature request. These things are vastly used on admin UIs, so having things like "last month", "last quarter" really improves the UX.