1

I am implementing ngxDaterangepicker to make custom range, I am trying to update the dates from the input field but dateUpdate event is not getting the latest update.

This is the update I do in the input field

This is the update I do in the input field

and here are the logs from dateUpdate function, it's not getting the change and here are the logs from dateUpdate function, it's not getting the change

Here is my html code

input
type="text"
ngxDaterangepickerMd
[(ngModel)]="selected"
(rangeClicked)="rangeClicked($event)"
(datesUpdated)="datesUpdated($event)"
[showCustomRangeLabel]="true"
[alwaysShowCalendars]="true"
[ranges]="ranges"
[linkedCalendars]="true"
[showClearButton]="false"
[isInvalidDate] = "isInvalidDate"
[keepCalendarOpeningWithRange]="keepCalendarOpeningWithRange"
[showRangeLabelOnInput]="showRangeLabelOnInput"
/>

in typescript file here is the code

export class DateRangeComponent implements OnInit {
selected: any;
alwaysShowCalendars: boolean;
showRangeLabelOnInput: boolean;
keepCalendarOpeningWithRange: boolean;
maxDate: moment.Moment;
minDate: moment.Moment;

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'),
 ],
};

isInvalidDate = (m: moment.Moment) => {
  return this.invalidDates.some(d => d.isSame(m, 'day'));
};

constructor() {
 this.maxDate = moment().add(2, 'weeks');
 this.minDate = moment().subtract(3, 'days');

 this.alwaysShowCalendars = true;
 this.keepCalendarOpeningWithRange = true;
 this.showRangeLabelOnInput = true;
 this.selected = {
   startDate: moment().subtract(1, 'days'),
   endDate: moment().subtract(1, 'days'),
 };
}
rangeClicked(range) {
  console.log('[rangeClicked] range is : ', range);
}
datesUpdated(range) {
 console.log('[datesUpdated] range is : ', range);
}
}
palAlaa
  • 9,500
  • 33
  • 107
  • 166

0 Answers0