Remove onchange listener and add it again

[Miguel Varela Rodriguez]

Hi Syncfusion team,

i have a datepicker in my app like this:

yearPicker = document.getElementById("yearPicker");

yearPicker = new ej.calendars.DatePicker({

start:'Decade',

depth:'Decade',

format:'yyyy',

change:SetDataSelector,

locale: 'es',

placeholder: 'seleccionar un año',

 

});

yearPicker.appendTo('#yearPicker');

Now as you se the onchange event calls "SetDataSelector".

I want to disable the onchange event temporally and enable it again.

how can i do this?

[Miguel Varela Rodriguez]

Here in my function y try to set the onchange event to null, and assing it again later. but it looks like it dosent work 

function SetDataSelector(args)

{

var elementId = args.element.id;

datePicker.change = null;

monthPicker.change = null;

yearPicker.change = null;

switch(elementId)

{

case "yearPicker":

datePicker.startDate = null;

datePicker.endDate = null;

monthPicker.value = null;

currentDateSelector = "yearPicker";

break;

case "monthPicker":

datePicker.startDate = null;

datePicker.endDate = null;

yearPicker.value = null;

currentDateSelector = "monthPicker";

break;

case "datePicker":

yearPicker.value = null;

monthPicker.value = null;

currentDateSelector = "datePicker";

break;

}

datePicker.change = SetDataSelector;

monthPicker.change = SetDataSelector;

yearPicker.change = SetDataSelector;

LOG(currentDateSelector);

}

[Balaji M]

Hi Miguel, 

Thanks for contacting Syncfusion Support. 

We have checked with the reported issue at our end with the shared sample code and found that the cause for the issue is re-assigning the value of change event of the component again within the change event handler. Since the change event is again reassigned within the change event handler after making the value as null, the change event is raised multiple times here. So please check for a condition outside the change event handler as shown in the below code snippet to resolve this issue at your end. 

function SetDataSelector(args) { 

  var elementId = args.element.id; 

  datePicker.change = null; 

  monthPicker.change = null; 

  yearPicker.change = null; 

  switch (elementId) { 

    case "yearPicker": 

      datePicker.startDate = null; 

      datePicker.endDate = null; 

      monthPicker.value = null; 

      currentDateSelector = "yearPicker"; 

      break; 

    case "monthPicker": 

      datePicker.startDate = null; 

      datePicker.endDate = null; 

      yearPicker.value = null; 

      currentDateSelector = "monthPicker"; 

      break; 

    case "datePicker": 

      yearPicker.value = null; 

      monthPicker.value = null; 

      currentDateSelector = "datePicker"; 

      break; 

  } 

  LOG(currentDateSelector); 

} 

 

If(yearPicker.change == null){ 

  datePicker.change = SetDataSelector; 

  monthPicker.change = SetDataSelector; 

  yearPicker.change = SetDataSelector; 

 

} 

 

 

 

If still the issue is not resolved at your end, please get back to us with more information of your use case for restricting the change event so that we can provide a solution to achieve your requirement. 

Regards, 

M. Balaji