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]
}