CODEWITHSUNDEEP
angulardatepickertimepickerbootstrap-datepickerngx-bootstrap
Sebastiandg7
Sebastiandg7

Reputation: 1324

ngx-bootstrap datepicker inline not refreshing minDate/maxDate when changed

I'm trying to use the ngx-bootstrap library to create a full date+time range picker using the Inline Datepicker and the Timepicker. The goal is to achieve something similar to this: Full datetime range picker

In order to make this component work, I will be using two Inline Datepicker instances, one for the inferior date and other for the superior date. Whenever a date is selected in the inferior date picker, that date must be set as the minDate of the superior date picker, and vice versa.

The problem is that whenever the minDate property changes, the new enabled/disabled dates in the superior picker are not refreshed until the mouse hovers over any previously enabled date.

The code to reproduce this is really simple, you can find it in this StackBlitz. We have a datepicker and some buttons that increment or decrement the minDate or maxDate properties used by the date picker:

HTML:

<bs-datepicker-inline
    [bsValue]="today"
    [minDate]="minDate"
    [maxDate]="maxDate"
    (bsValueChange)="onDateChange($event)">
</bs-datepicker-inline>

<button (click)="onClick('min+')">minDate +</button>
<button (click)="onClick('min-')">minDate -</button>
<button (click)="onClick('max+')">maxDate +</button>
<button (click)="onClick('max-')">maxDate -</button>

Component:

today: Date;
minDate: Date;
maxDate: Date;

constructor() {
    this.today = new Date();
    this.minDate = new Date();
    this.maxDate = new Date();
    this.minDate.setDate(this.minDate.getDate() - 1);
    this.maxDate.setDate(this.maxDate.getDate() + 1);
}

onClick(command: string) {
  switch (command) {
    case 'min+':
      this.minDate.setDate(this.minDate.getDate() + 1);
      break;
    case 'min-':
      this.minDate.setDate(this.minDate.getDate() - 1);
      break;
    case 'max+':
      this.maxDate.setDate(this.maxDate.getDate() + 1);
      break;
    case 'max-':
      this.maxDate.setDate(this.maxDate.getDate() - 1);
      break;
  }
}

Is there any ay to trigger this view update programmatically?

StackBlitz link: https://stackblitz.com/edit/angular-fk9pfe

Upvotes: 4

Views: 6870

Answers (1)

Maihan Nijat
Maihan Nijat

Reputation: 9355

Try the following dirty fix for now:

onClick(command: string) {
  switch (command) {
    case 'min+':
      this.minDate.setDate(this.minDate.getDate() + 1);
      break;
    case 'min-':
      this.minDate.setDate(this.minDate.getDate() - 1);
      break;
    case 'max+':
      this.maxDate.setDate(this.maxDate.getDate() + 1);
      this.rerender = true;
      break;
    case 'max-':
      this.maxDate.setDate(this.maxDate.getDate() - 1);
      break;
  }
  this.today = new Date();
}

The date-picker component does not detect changes when min or max value changes, and even do not refresh with ChangeDetectorRef, but it does detect changes if you reset the [bsValue] value. Looks like it is a bug, since [bsValue], [minDate] and [maxDate] inputs are all bind, but does not detect changes for the last two.

Edit:

It effectively seems to be a bug, an issue has been opened to address this behavior: https://github.com/valor-software/ngx-bootstrap/issues/5286

Upvotes: 1

Related Questions