Callbacks

datedropper comes with the following callback functions.

onChange

The onChange callback is excecuted when the date is changed through datepicker. It must be specified on the main options as shown below and it returns an object as in the following example:

How to set

new dateDropper({
  selector: '#myInput',
  onChange: function (res) {
    console.log('You have selected ' + (res.output.mm + '/' + res.output.dd + '/' + res.output.Y));
  }
});

Result

{
  "trigger":[trigger DOM element],
  "dropdown": [dropdown DOM element]
  "output":{
    "D":"Tue",
    "F":"January",
    "M":"Jan",
    "S":"22nd",
    "U":1548111600,
    "Y":2019,
    "d":22,
    "formatted":"01/22/2019",
    "j":22,
    "l":"Tuesday",
    "m":"01",
    "n":1
  }
}

onRangeSet

The onRangeSet callback is only excecuted when range option is declared as true and the start and end dates have been changed. It returns an object as shown below:

How to set

new dateDropper({
  selector: '#myInput',
  onRangeSet: function (range) {
    var start = range.a;
    var end = range.b;
    console.log('From ' + (start.m + '/' + start.d + '/' + start.y) + ' to ' + (end.m + '/' + end.d + '/' + end.y));
  }
});

Result

{
  "a":{
    "D":"Tue",
    "F":"January",
    "M":"Jan",
    "S":"22nd",
    "U":1548111600,
    "Y":2019,
    "d":22,
    "formatted":"01/22/2019",
    "j":22,
    "l":"Tuesday",
    "m":"01",
    "n":1
  },
  "b":{
    "D":"Tue",
    "F":"January",
    "M":"Jan",
    "S":"26th",
    "U":1548111600,
    "Y":2019,
    "d":26,
    "formatted":"01/26/2019",
    "j":26,
    "l":"Tuesday",
    "m":"01",
    "n":1
  }
}

onDropdownOpen

The onDropdownOpen callback is excecuted when trigger is clicked and the dropdown comes down. It must be specified on the main options as shown below and it returns an object as in the following example:

How to set

new dateDropper({
  selector: '#myInput',
  onDropdownOpen: function (res) {
    res.trigger.classList.add('focused');
  }
});

Result

{
  "trigger":[trigger DOM element],
  "dropdown": [dropdown DOM element]
  "output":{
    "D":"Tue",
    "F":"January",
    "M":"Jan",
    "S":"22nd",
    "U":1548111600,
    "Y":2019,
    "d":22,
    "formatted":"01/22/2019",
    "j":22,
    "l":"Tuesday",
    "m":"01",
    "n":1
  }
}

onDropdownExit

The onDropdownExit callback is excecuted when dropdown is closed and removed. It must be specified on the main options as shown below and it returns an object as in the following example:

How to set

new dateDropper({
  selector: '#myInput',
  onDropdownExit: function (res) {
    res.trigger.classList.remove('focused');
  }
});

Result

{
  "trigger":[trigger DOM element],
  "dropdown": [dropdown DOM element]
  "output":{
    "D":"Tue",
    "F":"January",
    "M":"Jan",
    "S":"22nd",
    "U":1548111600,
    "Y":2019,
    "d":22,
    "formatted":"01/22/2019",
    "j":22,
    "l":"Tuesday",
    "m":"01",
    "n":1
  }
}

onDestroy

The onDestroy callback is excecuted when datedropper is destroyed through the "destroy". It must be specified on the main options as shown below and it returns the trigger as a simple DOM element:

How to set

new dateDropper({
  selector: '#myInput',
  onDestroy: function (el) {
    console.log(el);
  }
});

onRender

The onRender callback is only excecuted when the calendar is on expanded view and each time you select or change a date. It returns an object with all the visible and selectable dates. It's really useful cause with this feature you will be able to add custom label for each day.
Let's see how to set it at best:

How to set

new dateDropper({
  selector: '#myInput',
  onRender: function(dates) {
  
   var myLabels = {
     '2021/04/04': {
       label: 'Easter',
       color: '#8bc34a'
     }
   };

   Object.keys(myLabels).forEach(function(key){
   
     var item = dates[key];
     if(item)
       item.customLabel({
         label: myLabels[key].label,
         color: myLabels[key].color
       });
       
   });
     
  }
});

Result

{
  "2021/02/25": [day DOM element],
  "2021/02/26": [day DOM element],
  "2021/02/27": [day DOM element],
  "2021/02/28": [day DOM element],
}