Issue with invalid dates after click [Range script]

Date and time pickers
1

I’m having this problem with the code and I think you can help me or direct me to the technical support.
When loading the calendar, the invalid dates appear inactive. Just as expected. However, on the first click of the initial date, the invalid dates are activated and after that they do not become inactive again. I’m looking for a way to keep them inactive all the time. Is it possible to do that?

Sumary: I want to keep invalid dates always deactived.

mobiscroll%20(1)
mobiscroll%20(1)793×601 289 KB

// Mobiscroll
$(‘#date_from_to’).mobiscroll().range({
startInput: ‘#start’,
endInput: ‘#end’,
min: min_date,
fromText: ‘Receber em’,
toText: ‘Devolver em’,
minRange: 8 * day,
//showSelector: false,
yearChange: false,
invalid: [
‘1/1/23’, // 1st of January disabled
‘20/2/23’, //Carnaval
‘21/2/23’, //Carnaval
‘7/4/23’, //Holliday
‘21/4/23’, //Holliday
‘1/5/23’,
‘8/6/23’,
‘7/9/23’,
‘12/10/23’,
‘2/11/23’,
‘15/11/22’,
‘25/12/22’, // Christmas disabled
‘w0’, // disable sundays
],
labels: [
{d: ‘1/1/23’,text: ‘Holliday’,color: ‘red’},
{d: ‘20/2/23’, text: ‘Holliday’, color: ‘red’ },
{d: ‘21/2/23’, text: ‘Holliday’, color: ‘red’ },
{d: ‘7/4/23’, text: ‘Holliday’, color: ‘red’ },
{d: ‘21/4/23’, text: ‘Holliday’, color: ‘red’ },
{d: ‘1/5/23’, text: ‘Holliday’, color: ‘red’ },
{d: ‘8/6/23’, text: ‘Holliday’, color: ‘red’ },
{d: ‘7/9/23’, text: ‘Holliday’, color: ‘red’ },
{d: ‘12/10/23’, text: ‘Holliday’, color: ‘red’ },
{d: ‘2/11/23’,text: ‘Holliday’,color: ‘red’},
{d: ‘15/11/23’,text: ‘Holliday’,color: ‘red’},
{d: ‘25/12/23’, text: ‘Holliday’, color: ‘red’ },
],

 onSet: function (event, inst) {
   $('[name=date_from], [name=date_to]').each(function(index){
     $(this).val(moment($('#date_from_to').mobiscroll('getVal')[index]).format('YYYY-MM-DD'));
   });
 },
 onSetDate: function (ev, inst) {
   var i,
       start,
       minDays = 8,
       invalid = inst.settings.invalid;

   if (ev.control == 'calendar') {

       invalid.length = 0;

       // Add constant invalids
       for (i = 0; i < invalid.length; i++) {
           invalid.push(invalid[i]);
       }
       if (ev.active == 'start') {
           start = inst.getVal(true)[0];
           // Add next 4 days to invalids
           for (i = 1; i < minDays - 1; i++) {
               invalid.push(new Date(start.getFullYear(), start.getMonth(), start.getDate() + i));
           }
       }

       // Redraw the calendar
       inst.redraw();
   }
 }

});

2

Hi Tiago,

I’ve checked your code, and it looks like you’re updating the invalid array’s length is set to 0 and that is the source of the problem.

invalid.length = 0;

If you remove the Add constant invalids part from the code, you should have the same outcome since inst.settings.invalid is already containing the previous invalid values.

          if (ev.control == "calendar" && ev.active == "start") {
            start = inst.getVal(true)[0];
            // Add next 4 days to invalids
            for (i = 1; i < minDays - 1; i++) {
              invalid.push(
                new Date(
                  start.getFullYear(),
                  start.getMonth(),
                  start.getDate() + i
                )
              );
            }

            // Redraw the calendar
            inst.redraw();
          }
        }

Let me know if this helps!

3

Thanks for help! Your suggestion fixed some part but the invalids being kept after end click.
These next 7 days are temporary. After set end date, these 7 temp dates must be reactivated on calendar.

I´ve reached to this point:

onSetDate: function (ev, inst) {
   var i,
       start,
       minDays = 8,
       invalid = inst.settings.invalid.slice(0);
       
   if (ev.control == "calendar" && ev.active == "start") {
     start = inst.getVal(true)[0];

     // Armazena os próximos 7 dias em uma matriz temporária
     var nextDays = [];
     // Add next 4 days to invalids
     for (i = 1; i < minDays - 1; i++) {
       nextDays.push(
         new Date( 
           start.getFullYear(),
           start.getMonth(),
           start.getDate() + i
         )
       );
     }

     // Adiciona os próximos 7 dias à matriz 'invalid'
     invalid = invalid.concat(nextDays);
     console.log(invalid);
     
     // Redraw the calendar
     inst.redraw();
   }
   if (ev.control == "calendar" && ev.active == "end") {
     // Restaura os valores iniciais da matriz 'invalid'
     invalid = inst.settings.invalid.slice(0);
     console.log(invalid);

     // Redraw the calendar
     inst.redraw();

   }
 }

But now it is not redrawing properly. Showing console appears almost everything right, frontend is preventing click on temp dates but is not applying gray style on those temp dates.

mobiscroll2
mobiscroll2821×734 208 KB