dynamically change options in rangeDateSelection event, bug occurs ?

[Tokenizers]

Hello,

I encountered problem when i modify the options in rangeDateSelection callback. I don't know what i'm doing wrong, could you help me please ?

Versions

• angular-mydatepicker: 0.10.3,
• Angular: 10.2.4

Describe the bug I declare the datePicker (in range mode) and i want to modify options to disable some days dynamically when i select the first date.

It works the first time but when i want to change the range date by another, then the calendar doesn't want to select the range anymore.

when i just comment the line which update the options, the calendar works.

To Reproduce Steps to reproduce the behavior:

1. modify the options only on first date

Template :

    <div class="input-box-container">
        <input class="input-box" placeholder="Click to select a date"
            angular-mydatepicker name="mydate" (click)="dp.toggleCalendar()"
            formControlName="date" [options]="mydrpEventOptions"
            (rangeDateSelection)="rangeDateSelection($event)"
            #dp="angular-mydatepicker" (dateChanged)="dateChanged()"/>
    </div>

Controller :

...
  public mydrpEventOptions: IAngularMyDpOptions = {
    dateRange: true,
    dateFormat: "dd.mm.yyyy",
    disableHeaderButtons: false,
    yearSelector: false,
    monthSelector: false,
    inline: false,
    showSelectorArrow: false,
    markCurrentDay: true,
    markCurrentMonth: true,
    markCurrentYear: true,
    dayLabels: {
      su: "D",
      mo: "L",
      tu: "M",
      we: "Me",
      th: "J",
      fr: "V",
      sa: "S",
    },
    monthLabels: {
      1: "Janvier",
      2: "Février",
      3: "Mars",
      4: "Avril",
      5: "Mai",
      6: "Juin",
      7: "Juillet",
      8: "Août",
      9: "Septembre",
      10: "Octobre",
      11: "Novembre",
      12: "Décembre",
    },
  };
...

  public rangeDateSelection(event) {
    const maxDays = 11;
    if (event.isBegin) {
      const copy = this.getCopyOfOptions();
      const forward = moment(event.jsDate).add(maxDays, "days");

      copy.disableSince = {
        year: moment(forward).get("year"),
        month: moment(forward).get("month") + 1,
        day: moment(forward).get("date"),
      };
      this.mydrpEventOptions = copy;
    }
  }

  getCopyOfOptions(): IAngularMyDpOptions {
    return JSON.parse(JSON.stringify(this.mydrpEventOptions));
  }

  public dateChanged() {
    const copy = this.getCopyOfOptions();

    copy.disableSince = {
      year: 0,
      month: 0,
      day: 0,
    };

    this.mydrpEventOptions = copy;
  }

...

2. select a range date (UI side)

3. select a range date again (UI side) and normally you can't.

Additional context i migrated from angular 7 to 10 i moved from mydatepicker to angular-mydatepicker

Thanks in advance

[kekeh]

Hello @Tokenizers

Here is an example to limit a date range.

[Tokenizers]

Thank you, it works. and sorry i didnt see the wiki ...