Keep end date in range calendar

[Hector_di_payaso]

Hello, im following your sample here

Angular and Ionic Range Date range Example | Mobiscroll

But when i select the day 21. the calendar reset the range and start again.
Is it posible to keep the start date (01/13) and just change the end date?
I’m using the version (“@mobiscroll/angular”: “^4.9.1”)

Thank you

[Hector_di_payaso]

Im trying force the inst.setActiveDate to ‘end’ inside the onSetDate but it enter in a infinite loop, i think the setActiveDate is triggering some kind of changeDetector…

[Elod]

Hi @Hector_di_payaso

Your approach is good, the setActiveDate method and the onSetDate event should be used in this case. To solve the infinite loop problem, you need to use the setTimeout method. For example:

onSetDate: (event, inst) => {
     setTimeout(() => {
         if (event.active === 'end') {
             inst.setActiveDate('end');
         }
     });
}

[Hector_di_payaso]

Thank you elod!
I finally reached to the same solution, but without the setTimeout

[Alex_Sunny]

@Elod

Hi @Hector_di_payaso

Your approach is good, the setActiveDate method and the onSetDate event should be used in this case. To solve the infinite loop problem, you need to use the setTimeout method. For example:

onSetDate: (event, inst) => {
     setTimeout(() => {
         if (event.active === 'end') {
             inst.setActiveDate('end');
         }
     });
}

thanks, my issue has been fixed.

[Alex_Sunny]

@Alex_Sunny

Hi @Hector_di_payaso

Your approach is good, the setActiveDate method and the onSetDate event should be used in this case. To solve the infinite loop problem, you need to use the setTimeout method. For example:

onSetDate: (event, inst) => {

 setTimeout(() => {
     if (event.active === 'end') {
         inst.setActiveDate('end');
     }
 });

}

Ometv chatroulette
thanks, my issue has been fixed.

thanks for the awesome information.