Callbacks

datedropper comes with the following callbacks.

---

• onReady
• onChange
• onRoundTripChange
• onPickerDragging
• onPickerRelease

---

onReady

The onReady callback is called once the datedropper has been initialized and the date picker is ready to be displayed. It returns an object as in the following example:

{
  "onReady":function(){
    "selector":["Selector DOM element here"],
    "date":{
      "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
    }
  }
}

FEATURES

Type	function/false
Default	false

---

onChange

The onChange callback is called when a date is changed through datedropper. It returns an object as in the following example:

{
  "selector":["Selector DOM element here"],
  "date":{
    "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
  }
}

FEATURES

Type	function/false
Default	false

EXAMPLE

{
  onChange: function (res) {
    console.log('Current date ' + (res.date.m + '/' + res.date.d + '/' + res.date.Y));
  }
}

---

onRoundTripChange

The onRoundTripChange callback is only called in case the roundtrip option is activated if the outward and return dates have been changed. It returns an object with two keys, outward and return, which looks like this:

{
  outward: {
    d: 31,
    m: 12,
    y: 2018
  },
  return: {
    d: 31,
    m: 01,
    y: 2019
  }
}

EXAMPLE

{
  onRoundTripChange: function (dates) {
    var outward = dates.outward;
    var back = dates.return;
    console.log('From ' + (outward.m + '/' + outward.d + '/' + outward.y) + ' to ' + (back.m + '/' + back.d + '/' + back.y));
  }
}

---

onPickerDragging

The onPickerDragging callback is called at every mouse/touch action performed on any day, month or year blocks of the date picker. It returns an object with three keys, i.e. d, m and y respectively for day, month and year, and the corresponding values.

FEATURES

Type	function/false
Default	false

EXAMPLE

{
  onPickerDragging: function (date) {
    console.log('Moving the ' + date.d + ' block. Current value is ' + date.d);
  }
}

---

onPickerRelease

The onPickerRelease callback is called when the mouse/touch is released after a gesture and returns an object with all of the date formats.

For instance, a date like Tuesday, January 1st, 2019 is returned as follows:

Key	Value
D	Tue
F	January
M	Jan
S	1st
U	1546300800
Y	2019
d	01
formatted	01/01/2019
j	1
l	Tuesday
m	01
n	1

FEATURES

Type	function/false
Default	false

EXAMPLE

{
  onPickerRelease: function (date) {
    console.log('You are currently selecting this date: ' + date.m + '/' + date.d + '/' + date.Y);
  }
}