Callbacks guide of datedropper JS

Version:

On this page:

    Try the new datedropper JS configurator to easily get the best plugin configuration!
    Configure now

    Datedropper provides the following callback functions to extend its functionality:


    onChange

    The onChange callback is triggered whenever the date is changed through the date picker. It must be specified in the main options and returns an object as shown below:

    How to Set

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

    Returned Value

    {
      "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 triggered when the range option is set to true and the start and end dates are changed. It returns an object as shown below:

    How to Set

    new dateDropper('#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));
      }
    });

    Returned Value

    {
      "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 triggered when the date picker dropdown opens. It must be specified in the main options and returns an object:

    How to Set

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

    Returned Value

    {
      "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 triggered when the date picker dropdown closes. It must be specified in the main options and returns an object:

    How to Set

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

    Returned Value

    {
      "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 triggered when the date picker is destroyed. It must be specified in the main options and returns the trigger DOM element:

    How to Set

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

    onRender

    The onRender callback is triggered when the calendar is in expanded view, updating each time a date is selected or changed. This feature allows custom labels to be added to specific days:

    How to Set

    new dateDropper('#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
            });
          }
        });
      }
    });

    Returned Value

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