V5 Datepicker is triggering on change event on initialize

Date and time pickers
1

I noticed that the V5 date picker triggers an onchange event when it’s initialized. This is problematic because in one case I want to reload the page when the date is changed, but if simply initializing the date picker triggers an onchange event, which reloads the page again, I end up in an endless loop of page loads.

How do I prevent the onchange from firing on initialize?

2

Hi @Vincent_Wansink!

Can you share a simple example where this happens? I was unable to reproduce this. When I initialize the datepicker there is no change event happening.

Thanks,
Zoli

4

o.k. I’ve simplified my code so you can see it here:

https://dev.timesavr.net/educator/test.php

I’m initializing the date picker like so

var inst = $('#pagedate').mobiscroll5().datepicker({
    onChange: function(event,inst){
      //changePageDate('child');
      console.log("onChange event firing now...");
    }
  }).mobiscroll5('getInst');

Notice that in the onChange event I was calling a function (changePageDate) that would reload the page based on the new date (causing an endless loop of reloading). I’ve obviously commented it out here but instead I’m logging to the console “onChange event firing now…” so you can see that as soon as the page loads.

The only other thing I’m loading on this page is jquery and mobiscroll 4 and 5.

5

It also happens if I do it this way.

$('#pagedate').mobiscroll5().datepicker();

$('#pagedate').on('change',function(){
    console.log("page date changing now...");
});

I think it’s applying the format when it’s initialized and that’s what’s causing the change event to fire. It starts off with this format : 2021-03-30 but it’s immediately changed to this format: 03/30/2021. I can see the flicker.

6

Thanks @Vincent_Wansink for the example. Now I could figure out what the issue is. So basically, you have a value in the input initially, and then you initialize the datepicker on the input.

The first issue is that the date format is different for the datepicker, than of the initial value that’s in the input. Because of that the date is rewritten in the input so a change is triggered. This is the native change event on the input.

The second issue that triggers the datepicker’s onChange event is that internally the value changes to a Date object that is parsed from the input. In this case this shouldn’t happen, so we consider this a bug, and will solve this in the upcoming versions. As a workaround you can use the returnFormat option set to "locale" in order to have the internal value the same value you have in the input, OR you can pass the value option to the datepicker with a javascript Date object.

1st olution

<input value="03/30/2021" id="pagedate" />

$('#pagedate').mobiscroll5().datepicker({
  returnFormat: 'locale',
  onChange: function(ev, inst) {
    // not triggered initially
  }
})

2nd solution

<input id="pagedate" value="03/30/2021" />

$('#pagedate').mobiscroll5().datepicker({
  value: new Date(2021, 2, 30),
  onChange: function(ev, inst) {
    // not triggered initially
  }
});

I would recommend the first solution because it’s more convenient to just use the locale return format, that to build up a date object.

7

I see that this issue was fixed in version 5.3 as per the change log. :+1:

" We fixed an issue where an input change event was unnecessarily fired, when the format of the initial value was different from the format specified by the returnFormat option."

9

I’m also getting this issue, on 5.5.1

10

Hey @Josh!
As far as I know this should be fixed in 5.5.1, could you post a simple example how to reproduce it? Also are you using a commercial package or the trial?

Thanks,
Zoli