Callbacks guide of timedropper JS

timedropper includes several callback functions to customize its behavior and respond to user interactions. These callbacks can be set in the configuration options during initialization.

• onChange
• onDropdownOpen
• onDropdownExit
• onDragging

onChange

This callback is triggered whenever the selected time is changed using the time picker. It allows you to execute custom actions based on the new time value.

How to set

new timeDropper('#myInput', {
  onChange: function (res) {
    console.log(`You have selected ${res.output.str}`);
  }
});

Returned value

{
  "trigger": [trigger DOM element],
  "dropdown": [dropdown DOM element]
  "output": {    
    "A": "AM"
    "H": 1
    "HH": "01"
    "a": "am"
    "h": 1
    "hh": "01"
    "m": 25
    "mm": 25
    "str": "1:25 am"
  }
}

onDropdownOpen

This callback is executed when the time picker dropdown opens after the trigger is clicked. It can be used to add custom behaviors, like applying styles to the trigger element.

How to set

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

Returned value

{
  "trigger": [trigger DOM element],
  "dropdown": [dropdown DOM element]
  "output": {    
    "A": "AM"
    "H": 1
    "HH": "01"
    "a": "am"
    "h": 1
    "hh": "01"
    "m": 25
    "mm": 25
    "str": "1:25 am"
  }
}

onDropdownExit

This callback is triggered when the time picker dropdown is closed and removed. It can be used to reset styles or perform cleanup actions.

How to set

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

Returned value

{
  "trigger": [trigger DOM element],
  "dropdown": [dropdown DOM element]
  "output": {    
    "A": "AM"
    "H": 1
    "HH": "01"
    "a": "am"
    "h": 1
    "hh": "01"
    "m": 25
    "mm": 25
    "str": "1:25 am"
  }
}

onDragging

This callback is triggered continuously as the user rotates the time picker control. It provides real-time feedback during the interaction, allowing you to update the UI or perform specific actions as the time selection changes dynamically.

How to set

new timeDropper('#myInput', {
  onDragging: function (res) {
    console.log(res.output);
  }
});

Returned value

{
  "trigger": [trigger DOM element],
  "dropdown": [dropdown DOM element]
  "output": {    
    "A": "AM"
    "H": 1
    "HH": "01"
    "a": "am"
    "h": 1
    "hh": "01"
    "m": 25
    "mm": 25
    "str": "1:25 am"
  }
}