Tempus-dominus: dp.change event fires twice on initial load

[tomosap]

I'm noticing some strange behaviour when using the dp.change event handler. When the page first loads, I open the calendar, choose a date, the alert window appears twice? On subsequent clicks on a chosen date, it only fires once.

    $('#startDatePicker').on("dp.change", function (e) {
        alert(e.date);
    });

Looking into the bootstrap js code, I've noticed the code below seems to run more than it should? I'm by no means a JS expert, but if someone can shed some light on it, I'd be grateful.

        notifyEvent = function (e) {
            if (e.type === 'dp.change' && ((e.date && e.date.isSame(e.oldDate)) || (!e.date && !e.oldDate))) {
                return;
            }

            //Prevent trigger if initializing, basically if the DateTimePicker
            //data is not yet set, where still initializing
            if (!element.data('DateTimePicker')) return;
            //End mod

            element.trigger(e);
        }

Thanks,
Tom

[sumeshps1]

Hi Guys,

I have the same problem codes are from latest master branch. dp.change trigger 3 time every time I do something with widget. Let us know if this has got fixes

Thanks
Sumesh

[nextgenappsllc]

Mine fires twice every time it loads or I change a value. I might make a global variable that stores the timestamp and won't execute if the global variable contains that stamp.

[csummers]

Similar problem here when re-rendering a section of html containing a datetime-picker, destroying it, and then creating another one. I actually refresh the view upon a dp.change event, so this issue creates an infinite loop for me.

I can confirm that the solution by @tomosap fixes the issue for me.

[l2ysho]

@csummers How can I fix it? What is @tomosap solution? I have infinite loop problem too... Thx for help

[l2ysho]

I have already figured out why this happening (maybe only in my case). Problem is format of datetimepicker and initial date.
Example:

$('#date').datetimepicker({
        format: 'DD.MM.YYYY'
    });

$('#date').data('DateTimePicker').date(new Date ()));

Fromat is set to 'DD.MM.YYYY', but initial date is Date object, so condition (e.date && e.date.isSame(e.oldDate) not works here (because it compare moments and their not the same, one is formated and other is full moment). To fix that, you need set initial data in same format as you defined in options.

$('#date').data('DateTimePicker').date(moment(new Date ()).format('DD.MM.YYYY'));

[jeftarmascarenhas]

@l2ysho I was having this same problem.
can solve with your example.

Thank you.

[itorian]

Noticed same issue, firing twice. Reason, i had two instance of datetimepicker on the page. When I changed this to one, this fires just one time.

Hope this helps.

[eonasdan-bot]

Hello. Thanks for using my project. We’re closing all tickets/prs for v4 as it is no longer supported. We’re making way for a new version. Please read this blog post