Highstock inputDateParser fires three times

Question

I am not sure what cause it to fire three times after selecting a date through date calendar. Here is the options set for rangeSelector

rangeSelector:{
    enabled:true,
    inputEnabled: true,
    inputDateFormat: '%d/%m/%Y',
    inputEditDateFormat: '%d/%m/%Y',                    
    inputDateParser: function (value) {
        value = value.split('/');
        console.log(value);
        return Date.UTC(
          parseInt(value[0]),
          parseInt(value[1]) - 1,
          parseInt(value[2])
        );
    }
}

by using backbone.view jquery selector, here how i initiate the chart

this.$el.highcharts(Options, this.extra);

and extra as additional settings to trigger the date picker

highlightSer: function (chart){         
      setTimeout(function () {              
         $('input.highcharts-range-selector', $(chart.container).parent())
            .datepicker({
                format: "dd/mm/yyyy",    
                todayBtn: "linked",
                autoclose: true,
                todayHighlight: true,
                orientation: "auto right"
            });             
      }, 0);            
}

is anyone experience this?

Answer 1

@seeARMS solution from this SO worked for me, with one modification:

Create a separate function for your event

One function has the datePicker method and your settings:

$('input_with_date_picker').datePicker({...});

A separate function controls your on changeDate event:

$(document).on('changeDate', 'input_with_date_picker', function({..do something..}));

or:

$('input_with_date_picker').on('changeDate', function({..do something..}));

Update:

The fiddle you provided in the comments is working as expected because of your added function:

$('input.highcharts-range-selector').on('changeDate', function(e) {
    alert(e.date);                                     
});

On page load, it executes twice because you have two elements that match. They seem to both be generated by this JS:

rangeSelector:{
        enabled:true,
        inputEnabled:true,
        inputDateFormat:"%d/%m",
        inputEditDateFormat:"%d/%m/%Y",
        inputDateParser: function (value) {
            value = value.split('/');
            console.log(value);
            return Date.UTC(
                parseInt(value[0]),
                parseInt(value[1]) - 1,
                parseInt(value[2])
            );
        }       
    },

If you change the date on either of the elements, the function executes once, which is the goal of your post.

You may be indicating it's not working because the dates aren't updating when you select a new date from the datePicker. I'm not sure why this is, I'm not familiar with highcharts.